在模板完成渲染后执行某些操作
我有一个外部模板,它调用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;
});
}
Kncokout暴露出一个AfterRender为此,结合:
<div data-bind='template: { name: "personTemplate",
data: myData,
afterRender: myPostProcessingLogic }'> </div>
对不起没有用同位素来帮你
这里是习俗结合我使用。这需要你的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
你能解释一下你的意思吗?“这需要你的viewModel有一个afterInit函数。” ? – motoxer4533 2013-04-09 18:34:57
我在答案中添加了一个部分。由于自定义绑定在视图模型上调用了AfterInit函数,所以用户界面所绑定的视图模型需要实现此功能。 – Aligned 2013-04-09 19:12:24
感谢。我的示例代码有afterAdd,但我也试过afterRender。另外,关于没有使用同位素,我不认为这是一个特定的插件的情况。它通常运行一个函数。 – motoxer4533 2013-04-09 15:13:14