knockout.js - 将参数传递给 KnockoutJS 模板的扩展语法

Question

我遇到过几种情况，我必须像这样编写模板调用:

<!-- ko template: {name: 'paginatedList', 
                   data: {listContainer: paginatedResults, itemTemplate: $parent.template}} --> 
<!-- /ko -->

因为除了我的数据对象(例如 paginatedResults )之外，我还需要传递补充信息，例如用于渲染项目的模板名称。作为另一个示例，当呈现列表中的项目时，我可能需要知道过滤器的当前设置，该过滤器存储在逻辑上与列表中的项目相距甚远的某个上下文中。

不必扭曲我的数据模型(在上面的示例中，将 paginatedResults 替换为 {listContainer: paginatedResults, itemTemplate: $parent.template}} ，最好在模板上有一些语法允许我传递(并随着模板的分层评估而增加)深度嵌套的模板在渲染自身时可能需要的一些额外上下文。

我想我想知道的是向 ko.bindingHandlers 添加额外(可选)参数的可行性。函数( init 和 update )使它们看起来像这样:

function (element, 
          valueAccessor, 
          allBindingsAccessor, 
          viewModel, 
          bindingContext, 
          context)

在编写上述示例时，我应该能够说类似的话

<!-- ko template: {name: 'paginatedList', 
                   data: paginatedResults, 
                   context: {itemTemplate: $parent.template}} --> 
<!-- /ko -->

或者更好，

<!-- ko template: {name: 'paginatedList', 
                   data: paginatedResults, 
                   itemTemplate: $parent.template} --> 
<!-- /ko -->

并拥有 itemTemplate成为我可以在嵌套模板和 data-bind 中引用的变量属性。

这有意义吗？我不太了解这将是多么难以实现。我想要担心的一件事是名称冲突，但一些命名​​约定可能会规避这一点。

基因

Answer 1

在不更改 Knockout 核心的情况下，我认为您能做的最好的事情就是创建一个与您当前正在传递的结构相似的包装绑定(bind)。

绑定(bind)可能如下所示:

ko.bindingHandlers.templateWithContext = {
    init: ko.bindingHandlers.template.init,
    update: function(element, valueAccessor, allBindings, data, context) {
        var options = ko.utils.unwrapObservable(valueAccessor());

        ko.utils.extend(context, options.context);

        return ko.bindingHandlers.template.update.apply(this, arguments);
    } 
};   

你会这样称呼它:

<div data-bind="templateWithContext: { name: 'itemsTmpl', data: items, context: { title: 'First' } }"></div>

这是一个示例:http://jsfiddle.net/rniemeyer/QNvFn/

看起来您正在使用 native 模板，但如果您仍在使用 jQuery 模板，那么它确实包含了 templateOptions feature使用了options jQuery模板的特性来传递上下文数据。这在 native 模板中不可用。现在的一般建议是使用 $root , $parent , 和 $parents variables访问信息或将对象作为 data 传递以您在帖子中描述的方式。