jquery dom操作與淘汰賽

Question

我想創建一個基於div內的內容的可展開/ collapsable div。基本上，如果div的高度> 50像素，我想添加一個鏈接來展開div來閱讀內容，然後將其摺疊。

我有一個使用Knockout綁定的div。我想下面的選項，它沒有工作：

1. 在使用的的document.ready jQuery腳本，它是無法找到的元素
2. 使用的自定義KO綁定使用init和更新。這不起作用，因爲我的div的高度始終爲0。

什麼是在KO完成綁定後處理最終HTML的最佳方法。

請告知

這裏是我的html

<div data-bind="foreach: notes" class="coment_div"> 
    <div class="mycontainer" data-bind="collapseUI:true"> 
     <p class="date_custome" data-bind="text:formattedDate"></p> 
     <p class="comment"> 
      <span data-bind="text:comment"></span> 
     </p> 
     <p class="read-more"></p> 
    </div> 
</div> 

這裏是我的jQuery腳本

var slideHeight = 50; 
$(".myContainer").each(function() { 
    var $this = $(element); 
    var $wrap = $this.children(".comment"); 
    var defHeight = $wrap.height(); 
    if (defHeight >= slideHeight) { 
     var $readMore = $this.find(".read-more"); 
     $wrap.css("height", slideHeight + "px"); 
     $readMore.append("<a href='#'>Read More...</a>"); 
     $readMore.children("a").bind("click", function(event) { 
      var curHeight = $wrap.height(); 
      if (curHeight == slideHeight) { 
       $wrap.animate({ 
        height: defHeight 
       }, "normal"); 
       $(this).text("Collapse"); 
       $wrap.children(".gradient").fadeOut(); 
      } else { 
       $wrap.animate({ 
        height: slideHeight 
       }, "normal"); 
       $(this).text("Read More..."); 
       $wrap.children(".gradient").fadeIn(); 
      } 
      return false; 
     }); 
    } 
}); 

Answer 1

上的documentation的一個AfterRender/afterAdd選擇閱讀起來。

基本上，它會是這個樣子（根據您的代碼）

<div data-bind="foreach: { data: notes, afterRender: addReadMoreWidget }" 
    class="coment_div"> 
    ... 
</div> 

段之後被渲染的addReadMoreWidget函數將被調用。上面鏈接到的文檔頁面詳細介紹了傳遞給afterRender函數的參數。

希望對你有用。