我使用agilityjs作为客户端mvc框架。我有一种情况,我有一个div元素,它应该显示从服务器端检索并作为模型放在客户端的商家列表。
var merchants = //retrieve merchants from server as json array;
var merchantsWrapper = $$({'merchants':merchants},'<div id="merchants-wrapper"></div>');
现在我需要一种方法来绑定要绑定到merchants-wrapper div
的merchants
模型属性,这个div应该显示所有的商人。每个商家以另一个原型merchant agility object
中定义的特定布局显示为:
var merchantProto = $$({//model props}, '<div>rendering layout</div>');
我想要一种机制,merchants array
应该双向绑定到merchants-wrapper div
,每个商家应该根据merchant prootype
进行渲染,如果merchants
属性通过排序或过滤而更改,则视图应该相应更新。
我有一个想法,我可以在create
事件上渲染一次,在change:merchants
事件上也可以,但我不想创建新的商家对象,所以应该有一种方法来清除merchants-wrapper
div的内容,然后添加新的商家。
我试过了,它对我有效…
var merchants = //retrieve merchants from server as json array;
var merchantsWrapper = $$({'merchants':merchants},'<div id="merchants-wrapper"></div>',
{
'create':function(){
var merchnts = [];
for (each merchant in merchants){ //its pseudocode plz dnt mind the syntax
var merchnt = $$(merchantProto,{//model props});
merchnts.push(merchnt);
}
this.model.set({'merchants':merchnts});
},
'change:merchants':function(){
this.view.$("#merchants-wrapper").html("");
for(each merchant in this.model.get('merchants')){
this.append(merchant);
}
}
);
我希望它能帮助其他人:)