<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>
解决方法
选项1：智能模型
如果您使用Backbone.js,您可以查看backbone-deep-model,它支持嵌套属性的路径语法(例如.store.get(‘ActiveItem.Price’)),尽管它仍在开发中.如果这不符合您的需求,Backbone plugins and extensions wiki上还有其他嵌套的模型类型选项.
选项2：智能适配器
如果这不适合您,则可以扩展您的铆钉适配器来处理路径语法.我已经在一个简单的例子,如何在http://jsfiddle.net/zKHYz/2/与以下naive适配器：
rivets.configure({
adapter: {
subscribe: function(obj,keypath,callback) { /* Subscribe here */ },unsubscribe: function(obj,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,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开始,铆钉支持iteration binding.通过创建一个返回数组的铆钉格式化程序,可以“迭代”您的属性.看看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：不要绑定在一个级别以上(推荐)
绑定深度超过一个级别的需要可能表明您的设计可以改进.
在您的示例中,您有一个商店的ItemCollection中的Items列表.您将分配一个单独的项目到商店的ActiveItem属性,设置各处的事件以一起尝试链接的东西,然后需要能够绑定到存储下的ActiveItem的属性,但随着ActiveItem本身更改等等.
一个更好的方法是使用每模型视图.在您的示例中,您正在尝试使用单个视图处理商店模型,ItemCollection和项目模型.相反,您可以有一个父商店视图,ItemCollection的子视图,然后根据需要生成Item视图.这样,视图更容易构建和调试,与您的整体模型设计紧密耦合,并在整个应用程序中更容易重用.在这个例子中,它也简化了您的Model设计,因为您不再需要Store上的ActiveItem属性来尝试维护状态;您只需将项目视图绑定到所选项目模型,并且所有内容都将随物品视图一起发布.
如果您使用Backbone.js,请查看Backbone.View作为起点;网上有很多例子,尽管我将首先承认事情会变得有些复杂,特别是当你有嵌套视图时.听到有关Backbone.LayoutManager的好消息,以及如何降低这种复杂性,但还没有机会自己使用它.
我修改了你最近的例子,在http://jsfiddle.net/EAvXT/8/使用生成的Item视图,并相应地删除了ActiveItem属性.虽然我没有从ItemCollection视图拆分商店视图,但请注意,我将其模型分别导入铆钉,以避免需要绑定到store.Items.models.再次,这是一个非常幼稚的例子,并且不处理完整的View生命周期,例如在删除视图时的unbinding Rivets.