javascript - knockout 模板。传递简单数据

Question

我需要传入模板简单整数。

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

我有 knockout 模板:

<script type="text/html" id="TemplateName">
    <input type="button" value="val" data-bind="click: $root.stop.bind($data, @@WHAT_IS_IT@@)"/>
</script>

我想要得到

<script type="text/html" id="TemplateName">
    <input type="button" value="val" data-bind="click: $root.stop.bind($data, 1)"/>
</script>

我该怎么做？

Answer 1

我遇到了类似的问题，想要重用除 1 个属性之外的相同模板。为了解决这个问题，我创建了一个新的模板绑定(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);
    }
};
ko.virtualElements.allowedBindings.templateWithContext = true;

这允许在调用绑定(bind)时添加一个名为“context”的新参数。在此上下文参数中，您可以创建一个对象，并且该对象内的所有属性都是暴露给模板的属性。

与使用“data”参数相比，我更喜欢此方法，因为这扩展了 $data 模型，而不是完全替换它。

你会这样使用它:

<div data-bind="templateWithContext: { name: 'TemplateName', context: { foo: 1 } }">

您的模板如下:

<script type="text/html" id="TemplateName">
    <input type="button" value="val" data-bind="click: $root.stop.bind($data, foo() )"/>
</script>