動態地設置<img>標記的src值，而不是頁面加載

Question

我試圖加載縮略圖，因爲我將鼠標懸停在相應的列表項上。

下面是綁定設置我使用

<div class="pageTitle" data-bind="text: ('Page ' + ($index() + 1)), value: page"></div> 
    <div class="pagePreview"> 
     <img data-bind="attr: { src: $parents[1].GetThumbnailsOnHover($element, page, $parent.Id, $index()) }"></img> 
    </div> 

這將返回的縮略圖，但它這樣做的所有負載一次。如果我有200多個列表項目，這可能會成爲問題。我寧願爲它只能載我懸停在每一個

我嘗試它包裹在一個函數如下：

<div class="pageTitle" data-bind="text: ('Page ' + ($index() + 1)), value: page"></div> 
    <div class="pagePreview"> 
      <img data-bind="attr: { src: function() {$parents[1].GetThumbnailsOnHover($element, page, $parent.Id, $index()) } }"></img> 
    </div> 

但後來它不會加載任何圖像，而是設置src發送給：function() + image string

是否有一個技巧，我可以用來延遲網絡通話，直到我實際懸停在項目上？

Answer 1

也許有很多方法可以使用，例如使用event與mouseover進行綁定，並放置一個可觀察對象以保存每個項目的來源。然後，通過在mouseover上調用你的函數來填充這個可觀察對象。

一個稍微簡單的方法，不會涉及任何視圖模型的變化，只是防止綁定的孩子，直到第一次懸停。

你可以使用自定義的用於此目的樣結合：

ko.bindingHandlers.bindOnHover = { 
    init: function(element, valueAccessor, allBindings, data, context) { 
     var bound; 

     //set up a handler for mouseover 
     ko.utils.registerEventHandler(element, "mouseover", function() { 
      //apply bindings the first time 
      if (!bound) { 
       ko.applyBindingsToDescendants(context, element);     
       bound = true; 
      } 
     }); 

     //tell KO that we will handle binding the children 
     return { controlsDescendantBindings: true }; 
    } 
}; 

樣品：

http://jsfiddle.net/rniemeyer/48PxT/

如果您正在使用jQuery，那麼你甚至可以使用.one而非ko.utils.registerEventHandler，所以該處理程序永遠不會再次被觸發（不是處理程序會導致性能問題）。