在模板完成渲染後執行某些操作

Question

我有一個外部模板，它調用JSON對象來填充divs的細節。在所有項目被添加到DOM之後，我正在努力爭取一些jQuery啓動（尋找使用Isotope）。

理想情況下，我想獲得關於如何獲得同位素工作一定支撐 - 顯示項目和點擊鏈接進行排序和過濾，以及一些普通淘汰賽幫助。我是KO新手，我甚至不確定自己在做什麼是最佳做法。

下面是相關的代碼（我不知道關於得到的jsfiddle與外部模板上運行 - 如果你有什麼祕訣，我爲得到一個例子去！）：

如果我將「afterAdd」更改爲「afterRender」，同位素和它的過濾機制將起作用 - 但它只渲染一個項目 - 而不是整個對象。

HTML

<div data-bind="template: { name: 'itemList', foreach: sampleItems, afterAdd: renderIsotope }"></div> 

外部模板

<div data-bind='attr: { "class": "item " + type }'> 
<div class="item-details"> 
    <span class="type" data-bind="text: type"></span> 
    <span class="size" data-bind="text: size"></span> 
    <span class="name" data-bind="text: name"></span> 
    <!-- ko if: type === 'folder' --> 
    <a href="#" class="changeFolderColor">Change Folder Color</a> 
    <span class="folderColor" style="display: none" data-bind="text: backgroundColor"></span> 
    <!-- /ko --> 
</div> 

<!-- ko if: type !== 'folder' --> 
<img data-bind="attr: { src: preview }" /> 
<!-- /ko --> 

型號

var sampleItems = [  
{ 
    type: "image", 
    size: "2482", 
    name: "Robert", 
    preview: "/images/placeholders/178x178-1.jpg", 
    backgroundColor: "", 
    id: "1" 
}, .... 

視圖模型

var itemsModel = function (items) { 
    var self = this; 
    self.items = ko.observableArray(ko.utils.arrayMap(items, function (item) { 
     return { type: item.type, size: item.size, name: item.name, preview: item.preview, backgroundColor: item.backgroundColor, id: item.id }; 
    })); 
} 

嘗試 「afterAdd」 功能

var renderIsotope = function (elements) { 
// initialize isotope 
$(".content .right").isotope({ 
    itemSelector: ".item", 
    getSortData: { 
     type: function ($elem) { 
      return $elem.find(".type").text(); 
     }, 
     size: function ($elem) { 
      return parseFloat($elem.find(".size").text()); 
     }, 
     name: function ($elem) { 
      return $elem.find(".name").text(); 
     } 
    } 
}); 

// filter items when filter link is clicked 
$('.item-filter a').click(function() { 
    var selector = $(this).attr('data-filter'); 
    $(".content .right").isotope({ filter: selector }); 
    return false; 
}); 

// sort items when sort link is clicked 
$('.item-sort a').click(function() { 
    // get href attribute, minus the '#' 
    var sortName = $(this).attr('href').slice(1); 
    $(".content .right").isotope({ sortBy: sortName }); 
    return false; 
}); 
} 

Answer 1

Kncokout暴露出一個AfterRender爲此，結合：

<div data-bind='template: { name: "personTemplate", 
         data: myData, 
         afterRender: myPostProcessingLogic }'> </div> 

more here

對不起沒有用同位素來幫你

Answer 2

這裏是習俗結合我使用。這需要你的viewModel有一個afterInit函數。這會在調用applyBindings時或Knockout綁定模板時觸發。 視圖模型需要一個名爲afterInit功能： 使用顯露的模塊模式：

myViewModel = function(){ 
    var afterInitDone = false, 
     afterInit = function(){ 
      // this fires from the custom afterInit binding below 
      // set afterInitDone, so if it fires again, we ignore it in the custom binding 
      afterInitDone = true; 
     }; 

    return { 
    AfterInit: afterInit 
    }; 
}; 
ko.bindingHandlers.afterInit = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)  
    { 
     //Possible place for the draggables when creating the Editor tool 
     //$(element).draggable({ containment: "#content", scroll: false }); 
     'use strict'; 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     'use strict'; 
     // don't run again if it has already been called 
     if (viewModel.afterInitDone !== undefined) { 
      if (!viewModel.afterInitDone) { 
       viewModel.AfterInit(); 
      } 
     } else { 
      viewModel.AfterInit(); 
     } 
    } 
}; 

然後我給它綁定在html：<div data-bind="afterInit: true">

見注4：http://knockoutjs.com/documentation/template-binding.html