鉚釘中的數據綁定js

我遇到了鉚釘庫並試圖做一個簡單的例子。但我有2個問題：鉚釘中的數據綁定js

在教程中他們寫道「user.name」（與點），但對我來說，如果我寫它只能「用戶：名」
當我改變user.name財產爲什麼DOM不會改變？

代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 

    <title>Example</title> 

    <script src="/js/rivets.min.js"></script> 
    <script src="/js/jquery-2.0.0.min.js"></script> 
    <script> 
     $(function() { 
      var user = { 
       name: 'User' 
      } 

      $('#userName').keyup(function() { 
       user.name = $('#userName').val(); 
      }); 

      rivets.bind($('#user'), { user:user }) 
     }); 
    </script> 
</head> 

<body> 
    <input type="text" id="userName" /> 

    <div id="user"> 
     <p data-text="user:name"></p> 
    </div> 
</body> 
</html>

來源

2013-05-11 Victor

免責聲明：這個答案是爲Rivets.js < 0.5編寫。如果您使用0.6或更高版本，請參閱適配器的當前文檔。

http://rivetsjs.com/#adapters

的.符號使用適配器訂閱模型上的特定屬性的變化。由於您尚未指定適配器，因此Rivets.js不知道如何讀取或訂閱模型以進行更改。見http://rivetsjs.com/#configure。

:表示法繞過適配器並直接在模型上讀取屬性。這是一個只讀操作，不會執行任何進一步的數據綁定。在沒有定義適配器的情況下，除非與依賴關係配合，或者在迭代的上下文中（需要一個適配器來完成其中任何一個），否則這實際上就是您所能做的一切，並且不會提供比靜態模板更多的好處。

您沒有提及您正在使用的任何框架或事件庫，並且您嘗試將您的示例綁定到普通的JavaScript對象。通常，Rivets.js與另一個庫一起使用，該庫爲您的模型提供更改事件，例如Backbone.js或Iota Observable。這是因爲當前瀏覽器無法觀察純JavaScript對象以進行更改......尚未...（請參閱Object.observe proposal）。

我推薦在Rivets.js旁邊使用這些庫中的一個，但如果完全設置爲使用普通JavaScript對象，則可以使用諸如Watch.js或Object.observe shim之類的東西。無論哪種方式，您都需要定義一個適配器。

來源

2013-05-14 00:09:57

我想用spine.js根據描述支持使用鉚釘。我不知道我是否理解正確，但在問題中發佈的示例中。我應該至少在#user> p中看到「用戶」文本。我很難找到從中開始的微不足道的例子。 – Macario 2013-05-30 20:29:33

@Macario在這裏查看我的答案，關於使用Rivets.js和Spine.js的幾個選項。 http://stackoverflow.com/a/17181424/99356 – 2013-06-19 01:20:22

我已經創建使用Rivets.js和Watch.JS演示，

http://jsfiddle.net/nsisodiya/njDGA/

```

var FlatKey = { 
    set: function (Obj, keypath, value) { 
     //console.log("set : " + keypath + " with " + value); 
     var V = Obj; 
     var keyArry = keypath.split("."); 
     keyArry.filter(function (v, i, A) { 
      return i !== A.length - 1; 
     }).map(function (v) { 
      if (V[v] === undefined) { 
       V[v] = {}; 
      } 
      return V = V[v]; 
     }); 
     V[keyArry.pop()] = value; 
    }, 
    get: function (Obj, keypath) { 
     var V = Obj; 
     keypath.split(".").map(function (v) { 
      if (V[v] === undefined) { 
       return V = ""; 
      } 
      return V = V[v]; 
     }); 
     return V; 
    }, 
    findsubPath: function (str) { 
     return str.split(".").filter(function (v, i, A) { 
      return i !== A.length - 1; 
     }).join("."); 
    } 

}; 

rivets.configure({ 
    adapter: { 
     subscribe: function (obj, keypath, callback) { 
      var subpath = FlatKey.findsubPath(keypath); 
      //console.log("subscribed : " + keypath + " : subpath = " + subpath); 
      if (subpath === "") { 
       watch(obj, keypath, callback); 
      } else { 
       watch(FlatKey.get(obj, subpath), keypath.split(".").pop(), callback); 
      } 
     }, 
     unsubscribe: function (obj, keypath, callback) { 
      //console.log("unsubscribed : " + keypath); 
      var subpath = FlatKey.findsubPath(keypath); 
      if (subpath === "") { 
       unwatch(obj, subpath, callback); 
      } else { 
       unwatch(FlatKey.get(obj, subpath), keypath.split(".").pop(), callback); 
      } 

     }, 
     read: function (obj, keypath) { 
      //console.log("read : " + keypath + " is " + FlatKey.get(obj, keypath)); 
      return FlatKey.get(obj, keypath); 
     }, 
     publish: function (obj, keypath, value) { 
      FlatKey.set(obj, keypath, value); 
      //console.log("publish : " + keypath); 
     } 
    } 
});

``` 它支持深層次的數據綁定！希望這會很有用！

來源

2013-09-12 06:00:35

我只是投了這個零，因爲有一個downvote沒有評論。 – Cody 2015-09-04 20:46:53

鉚釘中的數據綁定js

回答

相關問題