訪問HTML標籤的屬性裏面knockoutjs模板

Question

我有這樣的一個模板：

<script id="notesTemplate" type="text/html"> 
<li class="Note"> 
    <div class="NoteDate" data-bind="style: { backgroundColor: background, color: color}"> 
      <span data-bind="text: date"></span> 
     </div> 
     <div class="NoteRight" data-bind="style: { backgroundColor: background, color: color}"> 
      <div class="NoteContent"> 
       <span data-bind="text: content"></span> 
      </div> 
      <div class="line" data-bind="style: { borderColor: color}"></div> 
      <div class="NoteCategory" data-bind="style: { color: color}"> 
       <span data-bind="text: category"></span> 
      </div> 
     </div> 
</li> 
</script> 

正如你看到的，我創建了一個簡單的列表與筆記（我設置一些CSS樣式，因爲每一個音符的項目有自己的BG和顏色，但，這是正確的做法），但：

我想設置NoteDate分度，高度等於NoteRight股利。我實際上做的是，在JS：

$(function() { 
    ko.applyBindings(new viewModel()); 

    $(".Note").each(function (index, element) { 
     var date = $(element).find(".NoteDate"); 
     var note = $(element).find(".NoteRight"); 

     date.height(note.height()); 
    }); 
}); 

但這是有點慢，因爲音符使用Ajax檢索，我不得不這樣做呼叫與async: false或票據將不會在「每個」執行前取。

所以：可以將代碼「翻譯」到模板中？我試過類似的東西：

<div class="NoteDate" 
    data-bind="style: { backgroundColor: background, 
         color: color, height: $('.NoteRight').height() }"> 

但這並不奏效。

甚至一些摸索之後，我現在有這個功能（afterRender）：

this.updateNotesLayout = function (elements) { 
    var date = $(elements).find(".NoteDate"); 
    var note = $(elements).find(".NoteRight"); 
    alert(date.height()); 
    alert(note.height()); 
    date.height(note.height()); 
    alert(date.height()); 
} 

但日期及注意事項高度爲0，但在老例子，高度是在這兩種情況下是正確的。

有什麼想法？

Answer 1

對模板呈現的元素運行代碼的最簡單方法是使用模板綁定的afterRender回調。

http://knockoutjs.com/documentation/template-binding.html#note_4_using_the__option

這將讓你在新的節點上運行代碼。在每種情況下都會出現這種情況。