Question

我有一个外部模板调用JSON对象来填充div的详细信息。在将所有项目添加到DOM（希望使用Isotope）之后，我很难获得一些jQuery。

理想情况下，我想获得一些关于如何让Isotope工作的支持 - 显示项目和点击链接进行排序和过滤，以及一些一般的Knockout帮助。我是KO的新手，我甚至不确定我所做的是最佳做法。

以下是相关的代码（我不确定如何使用外部模板运行JSFiddle - 如果您有任何提示，我可以试一试！）：

如果我将“afterAdd”更改为“afterRender”，Isotope及其过滤机制将起作用 - 但它只渲染一个项目 - 而不是整个对象。

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 };
    }));
}

尝试“追加”功能

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

Knockout为此目的公开了后绑定：

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

more here

抱歉没有使用过同位素来帮助你

Answer 2

这是我正在使用的自定义绑定。这要求您的viewModel具有afterInit函数。调用applyBindings或Knockout绑定模板时会触发此操作。 View模型需要一个名为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

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

2 个答案: