KnockoutJS：如何觀察到的陣列

Question

插入數據我有一個畫廊名單後運行腳本：

<div class="gallery"> 
      <a href="#" class="next">next</a> 
      <a href="#" class="prev">prev</a> 

      <div class="frame"> 
       <ul data-bind="foreach: designs"> 
        <li> 
         <span class="text">№<span data-bind="text: getID()"></span> <span data-bind="text: getName()"></span></span> 
         <img src="images/img01.jpg" width="182" height="102" alt="image description"/> 
        </li> 
       </ul> 
      </div> 

    </div> 

JS

Models.Design = function() {...} 

function ViewModel(){ 
    this.designs = ko.observableArray(); 


    this.addDesign = function (_id, _name, _image, _video) { 

     var design = new Models.Design; 

     design.setID(_id); 
     design.setName(_name); 

     this.designs.push(design); 
    }; 

    this.addDesign(1, "Image 1"); 
    this.addDesign(2, "Image 1"); 
    this.addDesign(3, "Image 1"); 
// at this moment there is no elements in DOM 
} 

問：哪裏需要我寫$('.gallery').galleryScroll();用於更新我的畫廊滑塊？

Answer 1

只需訂閱觀測。您的回調將被調用，以便對該集合進行任何可見的*更改。

function ViewModel() { 
    this.designs = ko.observableArray(); 
    this.designs.subscribe(function() { 
     $('.gallery').galleryScroll(); 
    }); 

    // ... 
} 

*您可見的意思是您對observable執行操作，而不是直接在底層數組上執行操作。

Answer 2

我已經找到解決方案：

ko.bindingHandlers.gallery = { 
    update: function(element, valueAccessor) { 
     setTimeout(function() { 
      $(element).parents('.gallery').galleryScroll(); 
     }); 
    } 
}; 

<ul data-bind="foreach: designs, gallery:{}"> 
    <li>....</li> 
</ul>