Question

我有一个bindingHandler（例如myWidget），我希望根据相关视图模型中的属性设置命名模板。我目前通过在绑定中添加处理程序来实现这一点：

ko.bindingHandlers.myWidget = {

    template: function (viewModel) {
        // return template name based on viewModel properties
    },

    // init, update etc

然后在前端我声明了一个ko绑定：

<div data-bind="myWidget: true, template: ko.bindingHandlers.myWidget.template($data)"></div>

这有效，但我怀疑它不是＆＃34;对＆＃34;如果没有其他原因，除非我不添加额外的代码来订阅相关的vm属性更改，否则无法更新模板。

有没有办法在update（）中设置模板？或者还有其他我想念的东西？

Answer 1

您提供的内容很少，感觉您可能有XY问题。但是直接回答你的问题，如果你希望绑定处理程序将内容推迟到内置template绑定，我建议复制the foreach binding's approach并按照这样做：

＆＃13;

"use strict";

ko.bindingHandlers.myWidget = {
    'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers['template']['init'](element, valueAccessor);
    },
    'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers['template']['update'](element, valueAccessor, allBindings, viewModel, bindingContext);
    }
}

function RootViewModel() {
  var self = this;
  self.obs = ko.observable("a");
}

ko.applyBindings(new RootViewModel());

＆＃13;

pre { background: white; padding: 10px; color: #333; font: 11px consolas; border: 1px solid #ddd; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<script type="text/html" id="a">Ahh, Template</script>
<script type="text/html" id="b">Bee, Template</script>

<div data-bind="with: obs">
  <div data-bind="myWidget: { name: $data }"></div>
</div>

Change obs: <select data-bind="options: ['a', 'b'], value: obs"></select>

<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

＆＃13;

您传递给name的{{1}}也会传递给myWidget并被接听。当然，你也可以微调你传递给template的{{1}}和init的内容，但是对于你提供的上下文就足够了。

如何在淘汰赛自定义绑定中设置基于字符串/命名的模板？

1 个答案: