3

我遇到了铆钉库并试图做一个简单的例子。但我有两个问题：

  1. 在教程中他们写“user.name”（带点）但对我来说只有当我写“user:name”时它才有效
  2. 当我更改 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>
4

2 回答 2

5

免责声明：此答案是为 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 提议）。

我建议将其中一个库与 Rivets.js 一起使用，但如果您完全使用纯 JavaScript 对象，您可以考虑使用类似Watch.js或Object.observe shim的东西。无论哪种方式，您都需要定义一个适配器。

于 2013-05-14T00:09:57.387 回答
0

我使用 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-12T06:00:35.490 回答