骨干,有选择地在模板中渲染零件

时间:2011-09-01 12:13:38

标签: templates input backbone.js render

我将产品列为表格行,每行包含用于指定产品数量的输入字段。

我在这里做了一个小提琴,http://jsfiddle.net/kroofy/4jTa8/19/

如您所见,在数量字段输入完成后,整行再次渲染。因此,输入字段的焦点将会丢失,如果您想要输入的不仅仅是一个数字,或者输入字段之间的选项卡,那就不好了。

解决这个问题最优雅的方法是什么?

2 个答案:

答案 0 :(得分:4)

我会设置model.set({qty: _qty}, {silent: true}),然后使用this.$更新非输入字段来处理此问题。

作为静默处理的替代方案:而不是监听change个事件,而不是监听change:qtychange:sellPrice,并且有一个方法只更新需要在{{{}内更新的HTML 1}},而不是重新渲染DOM对象并打破焦点。

无论哪种方式,你对小提琴“选择性更新”的评论肯定是正确的方法。

this.$是jQuery的主干,它限制所有选择器只在View元素的DOM中搜索。该元素甚至不需要ID或类;它只需要存在和View保持它的处理。它非常有用。)

答案 1 :(得分:2)

我为骨干建立了一个名为Backbone.ModelBinding的插件,它可以在这种情况下提供帮助。我的插件允许您在模型更改时使用模型中的数据更新视图的某些部分。

我已经分叉/更新你的小提琴以显示它的实际效果:http://jsfiddle.net/derickbailey/FEcyF/6/

我删除了对模型更改的绑定。我还在表单的输入中添加了id属性以方便插件(插件使用的属性是可配置的)。最后,我在销售价格总计td中添加了data-bind属性。

你可以在这里获得插件:http://github.com/derickbailey/backbone.modelbinding/

希望有所帮助

FWIW:我的插件是Elf建议的自动化版本。我编写的代码完全像他描述的那样,很多次,这是插件的来源。我只是厌倦了手工编写代码:)