javascript 使用backbone.js 更新更改的属性
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7444060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating changed attributes with backbone.js
提问by fancy
So I'm setting a model with updated attributes.
所以我正在设置一个具有更新属性的模型。
Then in my view I'm listening for a change event for this model.
然后在我看来,我正在侦听此模型的更改事件。
When that fires I think I should use model.changedAttributes? Do I pass it a callback?
当发生火灾时,我认为我应该使用 model.changedAttributes?我是否将其传递给回调?
It should return a hash of all the attributes that are updated, or new? Is there anyway to know which are updated and which are new?
它应该返回所有更新的属性的散列,还是新的?无论如何要知道哪些是更新的,哪些是新的?
How should I go about updating once I have this hash of changed attributes? Parse the object to type of attribute or should I just use higher resolution listeners from the get go?
一旦我有了这个更改属性的散列,我应该如何进行更新?将对象解析为属性类型,还是应该从一开始就使用更高分辨率的侦听器?
Thanks!
谢谢!
回答by broofa
If your view is only showing a single attribute - for example, if it's a checkbox showing some boolean attribute of your model - you should listen to the 'change:attribute_name' event for that attribute, as described in the Backbone docs.
如果您的视图仅显示单个属性 - 例如,如果它是一个显示模型的某些布尔属性的复选框 - 您应该监听该属性的 'change:attribute_name' 事件,如Backbone 文档中所述。
If your view is more complex and relies on multiple model attributes - for example if it's a view for "To Do" list item that has "done", "text", and "dueDate" elements, then listen for the 'change' event. In this case, you can either either choose to update all of the elements on each event, or you can use changedAttributes() to determine which elements need updating.
如果您的视图更复杂并且依赖于多个模型属性 - 例如,如果它是具有“完成”、“文本”和“到期日”元素的“待办事项”列表项的视图,则侦听“更改”事件. 在这种情况下,您可以选择更新每个事件上的所有元素,也可以使用 changedAttributes() 来确定哪些元素需要更新。
To illustrate ...
为了显示 ...
Update attributes using 'change:attribute_name' events:
使用 'change:attribute_name' 事件更新属性:
This style works well for simple views where the number of model attributes being rendered is < 3 or so. More than that and the code gets a bit cumbersome.
这种样式适用于渲染模型属性数量小于 3 的简单视图。不仅如此,代码也会变得有点麻烦。
model.bind('change:done', function() {
view.doneElement.checked = model.get('done');
});
model.bind('change:text', function() {
view.textElement.value = model.get('text');
});
model.bind('change:dueDate', function() {
view.dueDateElement.value = model.get('dueDate');
});
Update everything on 'change' events:
更新有关“更改”事件的所有内容:
This style works well for complex views that render 4 or more attributes (the 3/4 attribute count is just a rough guideline, based mostly on my personal opinion).
这种风格适用于呈现 4 个或更多属性的复杂视图(3/4 属性计数只是一个粗略的指导方针,主要基于我的个人意见)。
model.bind('change', function() {
view.doneElement.checked = model.get('done');
view.textElement.value = model.get('text');
view.dueDateElement.value = model.get('dueDate');
});
The downside to this is that for any change, every element of the view is updated. So, for example, if a person marks a todo item as "done", the text will be re-rendered, possibly losing whatever selection they may have had there. Sometimes that sort of thing is an issue, sometimes it isn't - you'll have to decide based on what exactly your view is doing.
这样做的缺点是,对于任何更改,视图的每个元素都会更新。因此,例如,如果有人将待办事项标记为“完成”,则文本将被重新呈现,可能会丢失他们在那里可能拥有的任何选择。有时这类事情是一个问题,有时则不是——您必须根据您的视图究竟在做什么来决定。
Update only what's changed since the last 'change' event:
仅更新自上次“更改”事件以来发生的更改:
This is the more nuanced variation of the above, and combines the best of both approaches. It updates the view elements that need updating based on the changedAttributes() results.
这是上述方法的更细微的变化,并结合了两种方法的优点。它根据 changedAttributes() 结果更新需要更新的视图元素。
model.bind('change', function() {
var diff = model.changedAttributes();
for (var att in diff) {
switch(att) {
case 'done':
view.doneElement.checked = model.get('done');
break;
case 'text':
view.textElement.value = model.get('text');
break;
case 'dueDate':
view.dueDateElement.value = model.get('dueDate');
break;
}
}
});
Finally, I'll note that there's yet another variation on this that involves having the view store a hash of what values it's displaying, and passing that into the changedAttributes() method. That's typically not necessary, so I won't bore you with the details here.
最后,我会注意到还有另一种变体,它涉及让视图存储它显示的值的散列,并将其传递到 changedAttributes() 方法中。这通常是没有必要的,所以我不会在这里详细介绍。
回答by Edward M Smith
As per the backbone docsthe change event passes the model and the model's collection to the event handler.
根据主干文档,更改事件将模型和模型的集合传递给事件处理程序。
The event fires AFTER the changes happen, so the passed model contains the changes.
该事件在更改发生后触发,因此传递的模型包含更改。
The "change" event doesn't allow you to know which attributes have changed or been added. If you need to make actions based on individual attributes, then use the "change:attribute" events.
“更改”事件不允许您知道哪些属性已更改或添加。如果您需要根据各个属性进行操作,请使用“change:attribute”事件。