如何将动态数组模型属性绑定到agilityjs对象的视图

Question

我使用agilityjs作为客户端mvc框架。在这种情况下，我有一个div元素，它应该显示从服务器端检索的商家列表，并将其作为模型放在客户端。

var merchants = //retrieve merchants from server as json array;
var merchantsWrapper = $$({'merchants':merchants},'<div id="merchants-wrapper"></div>');

现在，我需要一种将merchants模型属性绑定到merchants-wrapper div的方法，其中该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的内容，然后附加新的商家。

Answer 1

嗯，我试过了，它对我很有效……

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);
           }  
       }
);

我希望它能帮助其他人:)