在模板完成渲染后执行某些操作

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