如何使用rivets.js绑定比一个级别更深的内容 [英] How to bind deeper than one level with rivets.js
问题描述
rivets.js新手在这里。我想绑定到一个动态变化的项目（store.ActiveItem）。我尝试了以下方法，但是虽然设置了store.ActiveItem，但store.ActiveItem。（任何属性）始终是未定义的。是否有一种标准的方式来绑定深度超过一个级别？
rivets.js newbie here. I want to bind to an item that will be changing dynamically (store.ActiveItem). I tried the following approach, but although store.ActiveItem is set, store.ActiveItem.(any property) is always undefined. Is there a standard way to bind deeper than one level?
<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>
推荐答案
绑定的工作方式在很大程度上取决于铆钉适配器你正在使用，虽然你的模型也可以进行繁重的工作。
How the binding works is largely determined by the Rivets adapter you are using, although your model could also do the heavy lifting.
如果你正在使用 Backbone.js ，你可以看看 backbone-deep-model ，它支持嵌套属性的路径语法（例如。 store.get（'ActiveItem.Price'） ），虽然它仍处于开发阶段。如果这不能满足您的需求，嵌套模型类型选项，-Resourcesrel =noreferrer> Backbone插件和扩展wiki 。
If you're using Backbone.js, you could take a look at backbone-deep-model, which supports path syntax for nested attributes (Eg. store.get('ActiveItem.Price')), though it is still under development. If that doesn't quite meet your needs, there are other nested model-type options on the Backbone plugins and extensions wiki.
如果这对你不起作用，你可以扩展你的Rivets适配器来处理路径语法。我在 http://jsfiddle.net/zKHYz/2/上汇总了一个关于如何执行此操作的简单示例。 使用以下天真适配器：
If that doesn't work for you, you can extend your Rivets adapter to handle path syntax. I've put together a simple example on how to do this at http://jsfiddle.net/zKHYz/2/ with the following naive adapter:
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：脏黑客
As版本0.3.2，Rivets支持迭代绑定。通过创建一个返回数组的Rivets格式化程序，您可以迭代您的属性。请查看 http://jsfiddle.net/mhsXG/3/ 以获取此示例：
Option 3: Dirty Hacks
As of version 0.3.2, Rivets supports iteration binding. By creating a Rivets formatter that returns an array, you can "iterate" over your property. Take a look at http://jsfiddle.net/mhsXG/3/ for a working example of this:
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>
我不确定此处是否需要计算属性语法;您必须使用您的模型对此进行测试以查看哪些有效。
I'm not sure if the computed property syntax is required here; you will have to test this with your model to see what works.
绑定深度超过一个级别的需要可能表明您的设计可以改进。
The need to bind deeper than one level may be an indication that your design can be improved.
在您的示例中，您在商店的ItemCollection中有一个Items列表。您可以将单个Item分配给Store的ActiveItem属性，在任何地方设置事件以尝试链接事物，然后需要能够绑定到Store下ActiveItem的属性，但每当ActiveItem本身发生更改时都会更新等等。
In your example, you have a list of Items in an ItemCollection for a Store. You go about assigning a single Item to the Store's ActiveItem property, setting up events everywhere to try link things together, and then need to be able to bind to the properties of the ActiveItem under the Store, yet have things update whenever the ActiveItem itself changes, etc..
更好的方法通过使用每模型视图方法。在您的示例中，您尝试使用单个视图处理商店模型，ItemCollection和项目模型。相反，y你可以拥有一个父商店视图，一个ItemCollection的子视图，然后根据需要生成项目视图。这样，视图更易于构建和调试，与整体模型设计的关联性较低，并且在整个应用程序中更易于重用。在此示例中，它还简化了模型设计，因为您不再需要Store上的ActiveItem属性来尝试维护状态;您只需将项目视图绑定到选定的项目模型，并使用项目视图释放所有内容。
A better way of doing this is by using a view-per-model approach. In your example, you're trying to handle the Store Model, the ItemCollection and the Item Model with a single view. Instead, you could have a parent Store view, a subview for the ItemCollection, and then generate Item views as necessary below that. This way, the views are easier to build and debug, less tightly coupled to your overall Model design, and are more readily reusable throughout your application. In this example, it also simplifies your Model design, as you no longer need the ActiveItem property on the Store to try maintain state; you simply bind the Item View to the selected Item Model, and everything is released with the Item View.
如果您正在使用 Backbone.js ，看看 Backbone.View 作为起点;网上有很多例子，虽然我会第一个承认事情会变得有些复杂，特别是当你有嵌套视图时。我听说过有关 Backbone.LayoutManager 的好消息，以及它如何降低这种复杂性，但还没有我自己使用它的机会。
If you're using Backbone.js, take a look at Backbone.View as a starting point; there are many examples online, although I'll be the first to admit that things can get somewhat complex, especially when you have nested views. I have heard good things about Backbone.LayoutManager and how it reduces this complexity, but have not yet had the chance to use it myself.
我已经修改了你最近的例子，以便在 http://jsfiddle.net/EAvXT/8/ ，并相应地废除了ActiveItem属性。虽然我没有从ItemCollection视图中拆分Store视图，但请注意我将它们的模型分别传递给Rivets以避免需要绑定到 store.Items.models 。同样，这是一个相当天真的例子，并没有处理完整的View生命周期，例如解除绑定铆钉删除视图时。
I've modified your most recent example to use generated Item views at http://jsfiddle.net/EAvXT/8/, and done away with the ActiveItem property accordingly. While I haven't split the Store view from the ItemCollection view, note that I pass their Models into Rivets separately to avoid needing to bind to store.Items.models. Again, it is a fairly naive example, and does not handle the full View lifecycle, such as unbinding Rivets when the View is removed.
这篇关于如何使用rivets.js绑定比一个级别更深的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
