Question

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

在教程中，他们写了“user.name”（带点），但对我来说，只有当我写“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>

Answer 1

免责声明：这个答案是为Rivets.js＆lt; 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或{{{{{{ 3}}。无论哪种方式，您都需要定义适配器。

Answer 2

我使用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);
        }
    }
});

``` 它支持深层数据绑定！希望这会有用！

铆钉中的数据绑定js

2 个答案: