这里是 rivets.js 新手。我想绑定(bind)到一个将动态更改的项目 (store.ActiveItem)。我尝试了以下方法，但尽管设置了 store.ActiveItem，但 store.ActiveItem.(any property) 始终未定义。是否有一种标准的方法来绑定(bind)比一层更深的层次？

<div id="editItemDialog" data-modal="store.ActiveItem < .ActiveItem">
    <a data-on-click="store:ClearActiveItem" href="#">close - works</a>
    <div>
        <div>
        <label>name:</label><input data-value="store.ActiveItem.Name < .ActiveItem"/>
        </div>
        <div>
        <label>price:</label><input data-value="store.ActiveItem.Price < .ActiveItem"/>
        </div>
        <div>
        <label>description:</label><textarea data-value="store.ActiveItem.Description < .ActiveItem"></textarea>
        </div>
    </div>
</div>

最佳答案

绑定(bind)的工作方式在很大程度上取决于您使用的 Rivets 适配器，尽管您的模型也可以完成繁重的工作。

选项 1:智能模型

如果您使用 Backbone.js ，你可以看看backbone-deep-model ，它支持嵌套属性的路径语法(例如 store.get('ActiveItem.Price'))，尽管它仍在开发中。如果这不能完全满足您的需求，Backbone plugins and extensions wiki 上还有其他嵌套模型类型的选项.

选项 2:智能适配器

如果这对您不起作用，您可以扩展 Rivets 适配器来处理路径语法。我在 http://jsfiddle.net/zKHYz/2/ 上整理了一个关于如何执行此操作的简单示例。使用以下天真的适配器:

rivets.configure({
    adapter: {
        subscribe: function(obj, keypath, callback) { /* Subscribe here */ },
        unsubscribe: function(obj, keypath, callback) { /* Unsubscribe here */ },
        read: function(obj, keypath) {
            var index = keypath.indexOf('.');
            if (index > -1) {
                var pathA = keypath.slice(0, index);
                var pathB = keypath.slice(index + 1);
                return obj[pathA][pathB];
            } else {
                return obj[keypath];
            }
        },
        publish: function(obj, keypath, value) {
            var index = keypath.indexOf('.');
            if (index > -1) {
                var pathA = keypath.slice(0, index);
                var pathB = keypath.slice(index + 1);
                return obj[pathA][pathB] = value;
            } else {
                return obj[keypath] = value;
            }
        }
    }
});

选项 3:肮脏的黑客

从版本 0.3.2 开始，Rivets 支持 iteration binding .通过创建返回数组的 Rivets 格式化程序，您可以“迭代”您的属性。看看http://jsfiddle.net/mhsXG/3/有关此的工作示例:

rivets.formatters.toArray = function(value) {
    return [value];
};

<div data-each-item="store.ActiveItem | toArray < store.ActiveItem"">
    <label>name:</label><input data-value="item.Name < store.ActiveItem"/>
    ...
</div>

我不确定这里是否需要计算属性语法；您必须使用您的模型对此进行测试，以查看哪些有效。

选项 4:绑定(bind)深度不要超过一层(推荐)

需要比一层更深的绑定(bind)可能表明您的设计可以改进。

在您的示例中，您在商店的 ItemCollection 中有一个项目列表。您开始将单个 Item 分配给 Store 的 ActiveItem 属性，在各处设置事件以尝试将事物链接在一起，然后需要能够绑定(bind)到 Store 下 ActiveItem 的属性，但只要 ActiveItem 本身发生变化，事物就会更新等..

执行此操作的更好方法是使用按模型查看的方法。在您的示例中，您尝试使用单个 View 处理 Store Model、ItemCollection 和 Item Model。相反，您可以有一个父 Store View ，一个 ItemCollection 的 subview ，然后根据需要在其下方生成 Item View 。这样， View 更容易构建和调试，与整体模型设计的耦合度降低，并且更容易在整个应用程序中重用。在此示例中，它还简化了您的模型设计，因为您不再需要 Store 上的 ActiveItem 属性来尝试维护状态；您只需将 Item View 绑定(bind)到选定的 Item Model，所有内容都会随 Item View 一起发布。

如果您使用 Backbone.js ，看看Backbone.View作为起点；网上有很多示例，但我首先承认事情可能会变得有些复杂，尤其是当您有嵌套 View 时。我听说过关于 Backbone.LayoutManager 的好消息以及它如何降低这种复杂性，但我自己还没有机会使用它。

我修改了您最近的示例，以在 http://jsfiddle.net/EAvXT/8/ 处使用生成的项目 View ，并相应地取消了 ActiveItem 属性。虽然我没有将 Store View 与 ItemCollection View 分开，但请注意，我将它们的模型分别传递到 Rivets 以避免需要绑定(bind)到 store.Items.models。同样，这是一个相当天真的例子，并没有处理完整的 View 生命周期，例如 unbinding Rivets当 View 被移除时。

关于javascript - 如何使用 rivets.js 绑定(bind)深度超过一层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12868566/