铆钉中的数据绑定js

Question

铆钉中的数据绑定js

我遇到了铆钉库,试图做一个简单的例子.但我有两个问题:

在教程中,他们写"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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*rds 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这样的东西.无论哪种方式,您都需要定义适配器.

归档时间：	13 年，1 月前
查看次数：	7086 次
最近记录：	12 年，8 月前