與jQuery混合淘汰賽

我正在用knockout.js創建一個評論系統，我在使用我們現有的jQuery函數獲取模板方面遇到了一些問題。與jQuery混合淘汰賽

一個例子是創建日期註釋。我寫了一個jQuery函數，導致數據從5-5-2012變爲2 Days ago。例如：

<ul data-bind="foreach: Comments"> 
     <li data-bind="attr: { id: Id }" class="Comment"> 
      <div data-bind="text: DateCreated" class="prettyDate"></div> 
      ... 
     </li> 
    </ul> 


    <script type="text/javascript"> 
      $(function(){ 
       $(".prettyDate").prettify(); 
      }); 
    </script>

通過此代碼，當我動態添加新評論時，日期保持爲5-5-2012格式。還有其他幾個自定義的jQuery函數可以用來重複數據，這些數據現在通過基於類別的動態創建（通常通過基於類的選擇）。

如何將這些自定義jQuery函數應用於由knockout.js生成的動態數據？

來源

2012-05-09 joe_coolish

我想知道是否用類似.live的方式監測DOM的變化 –

@TomWijsman - 不幸的是，live已經被棄用，贊成'.on' http://api.jquery.com/live/另外，我不知道我會綁定什麼事件。你認爲一個好的事件會是什麼？我不認爲'加載'會起作用：/ –

啊，我知道，我還沒有使用它，但剛剛聽到它。你可以找到一個[事件列表]（http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list），你將在那裏尋找DOM的;也許是關於修改字符數據的東西，我懷疑它是否會改變子樹本身。 –

一種選擇可能是使用自定義綁定處理它通過你的jQuery插件發送綁定元素，例如：

http://jsfiddle.net/mikebridge/Q9r86/4/

另一種可能性是添加計算觀察到的在您的視圖模型。

來源

2012-05-09 06:15:53 mikebridge

是的，我害怕被迫使用自定義綁定...現在我們正在使用一個類來定義誰被批准。 +1爲好榜樣！如果我弄不清其他什麼，我會用這個。 –

嘿，我用你的想法，並分出一個新的jsfiddle。這可能與我的問題有更密切的關係：http://jsfiddle.net/BGHhP/ –

希望它能讓你獲得至少部分途徑。我懷疑最乾淨的解決方案是使用計算的observable來調用它，因爲它需要更少的代碼來觸發jQuery轉換。我也認爲可能有一個像.live或.on這樣的jQuery觸發器，它可以檢測dom插入 - 這會更清晰 - 但我不認爲它有一個。 – mikebridge

如果您需要在生成的DOM元素上運行一些進一步的自定義邏輯，您可以使用下面介紹的afterRender/afterAdd/beforeRemove/beforeMove/afterMove回調中的任何一個。

<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }"> 
    <li data-bind="text: $data"></li> 
</ul> 
<button data-bind="click: addItem">Add</button> 


<script type="text/javascript"> 
    ko.applyBindings({ 
     myItems: ko.observableArray([ 'A', 'B', 'C' ]), 
     yellowFadeIn: function(element, index, data) { 
      $(element).filter("li") 
         .animate({ backgroundColor: 'yellow' }, 200) 
         .animate({ backgroundColor: 'white' }, 800); 
     }, 
     addItem: function() { this.myItems.push('New item'); } 
    }); 
</script>

來源：http://knockoutjs.com/documentation/foreach-binding.html#note-7-post-processing-or-animating-the-generated-dom-elements

然而，提防以下注意事項：

如果你的目標實際上是他們已經加入時，其他行爲附加到新的DOM元素（如，事件處理程序或激活第三方UI控件），那麼如果將該新行爲作爲自定義綁定來實現，則您的工作將變得更加容易

來源

2015-02-20 14:02:04 janv8000

與jQuery混合淘汰賽

回答

相關問題