2015-06-25 54 views
0

我已經看過,並沒有發現有關如何執行以下多文檔:CustomBinding處理器渲染模板爲每個項目在陣列

我想創建一個自定義幻燈片淘汰賽結合的處理程序。該處理程序應該能夠傳遞一個圖像數組以及用於幻燈片中呈現的每個項目的淘汰模板的ID。我遇到的問題是我無法在網上找到任何示例,顯示如何將observablearray傳遞給自定義綁定,並且使用knockout腳本模板爲數組中的每個項目呈現一個dom元素到頁面上。有沒有人有任何例子?

結合實施例

<div class="slideshow" data-bind="slideshow: { data: images, imageTemplate: 'rowTmpl' }"> 

     </div> 

模板用於每個項目例如

 <script id="rowTmpl" type="text/html"> 
      <div class='product-image-container'> 
       <figure class='product-image'> 
        <picture> 
         <img itemprop='image' alt='Image' data-bind='attr: { src: image.Url }' /> 
         </picture> 
        <figcaption></figcaption> 
        </figure> 
       </div> 

     </script> 

任何意見/幫助/實例是極大的讚賞

+0

敲除文檔是否幫助你? http://knockoutjs.com/documentation/template-binding.html在「注2:在命名模板中使用」foreach「選項」 – gkempkens

+0

不,它不。我爲創建幻燈片的第三方庫創建自定義ko綁定處理程序。因此,內置模板綁定是不合適的。 – Lochnessss

回答

0

,能夠管理由所提供的功能foreach自己,但使用binding preprocessing功能要容易得多。 Knockout Punches也使用此功能來實現其大部分功能。

您在評論中提到什麼..

因此該內置模板結合是不適合的。

..makes沒有多大意義:如果您而實現模板加載自己,你可以回去純醇」手動創建&重視聽衆對他們的DOM元素。 更明智的是將模板綁定集成到您的自定義綁定中,儘管無形。就這樣,還有的甚至沒有對任何一個initupdate功能的需要:

ko.bindingHandlers.slideshow = { 
    preprocess: function(value, name, addBinding) { 
    var newBinding = value.replace('imageTemplate', 'name').replace('data', 'foreach'); 
    addBinding('template', newBinding); 
    return value; 
    } 
}; 

當然,你還可以添加一個init /更新功能,和「參數」你的綁定(添加了更多選項),和作用在他們在那裏。

你可以在這裏找到一個演示:http://jsfiddle.net/kevinvanlierde/yrv8cv26/1/。 我還添加了一個簡單的上一個/下一個導航,以顯示如何在事後添加簡單DOM事件的功能。