Templates knockoutjs-自定义模板与父内容绑定

我在使用knockoutjs和自定义模板绑定时遇到问题

假设我有一个如下的HTML主体：

<div id="1">
    <div data-bind="template:{name: '2', data: data}"></div>
</div>

<div id="2">
    <h3 data-bind="text: caption"></h3>
</div>

var ViewModel2 = function () {
    this.caption = ko.observable("Caption");
}

var ViewModel1 = function () {
    this.data = new ViewModel2();
}

ko.applyBindings(new ViewModel1(), document.getElementById("1"));

如果我们测试这段代码，一切都会正常工作
请参见JSFIDLE示例：

现在假设我们要进行自定义模板绑定。我们将使用“templatex”绑定而不是“template”

在HTML中，我们只需更改一行：

<div data-bind="templatex:{name: '2', data: data}"></div>

见：

但在本例中，我们有一个错误，即在模型中找不到“caption”

现在，让我们将模板{}添加到html绑定中：

<div data-bind="template: {}, templatex:{name: '2', data: data}"></div>

见：

现在一切正常

在绑定父div时，似乎无法确定子div是模板

那么，如何在自定义模板活页夹中将其标记为模板呢

---

谢谢。

我认为您不能使用自定义绑定来创建新的模板引擎。您需要使用

ko.setTemplateEngine（）

注册自定义引擎

从knockoutjs源代码：

If you want to make a custom template engine,

[1] Inherit from the ko.templateEngine class (like ko.nativeTemplateEngine does)
[2] Override 'renderTemplateSource', supplying a function with this signature:

       function (templateSource, bindingContext, options) {
           // - templateSource.text() is the text of the template you should render
           // - bindingContext.$data is the data you should pass into the template
           //   - you might also want to make bindingContext.$parent, bindingContext.$parents,
           //     and bindingContext.$root available in the template too
           // - options gives you access to any other properties set on "data-bind: { template: options }"
           //
           // Return value: an array of DOM nodes
       }

[3] Override 'createJavaScriptEvaluatorBlock', supplying a function with this signature:

       function (script) {
           // Return value: Whatever syntax means "Evaluate the JavaScript statement 'script' and output the result"
           //               For example, the jquery.tmpl template engine converts 'someScript' to '${ someScript }'
       }

    This is only necessary if you want to allow data-bind attributes to reference arbitrary template variables.
    If you don't want to allow that, you can set the property 'allowTemplateRewriting' to false (like ko.nativeTemplateEngine does)
    and then you don't need to override 'createJavaScriptEvaluatorBlock'.

---

示例：（请参见注释7）

您有错误的更新处理程序，请更改为：

ko.bindingHandlers.templatex= {
    init: function(element) {
        // do things
        return ko.bindingHandlers.template.init.apply(this, arguments);
    },

    update: function(element) {
        return ko.bindingHandlers.template.update.apply(this, arguments);
    }
}

---

下面是工作提示：

您需要返回模板绑定

init

函数的值。它返回一个名为

ControlsDescentBindings

的标志，告诉KO您将处理绑定其子项。否则，它将继续尝试将子元素与当前数据上下文绑定。

ko.bindingHandlers.templatex= {
    init: function(element) {
        // do things
        return ko.bindingHandlers.template.init.apply(this, arguments);
    },

    update: function(element) {
        return ko.bindingHandlers.template.update.apply(this, arguments);
    }
}