如何將動態數組模型屬性綁定到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); 
      } 
     } 
); 

我希望它可以幫助別人:)