javascript - 使用自定义绑定(bind)更新元素文本

Question

我正在制作我的第一个自定义绑定(bind)。我希望能够根据资源文件指定元素上显示的文本。像这样的事情:

var exampleResource = {
    hello: 'world'
};

ko.bindingHandlers.resource = {

    init: function (element, valueAccessor) {

        var value = valueAccessor();

        ko.bindingHandlers.text.update(element, function() { 
            return exampleResource[value] || '';
        });
    }

};

<span data-bind="resource: 'hello'"></span>

我应该像上面那样使用ko.bindingHandlers.text吗？

由于资源变量不可观察，是否有必要为绑定(bind)添加 update 回调？如果我理解正确的话，只有当可观察值作为值传递时才会被调用？

Answer 1

如果您希望支持动态绑定(bind)处理程序的输入，则需要更新。在您的示例中，您没有这样做，但您可以。这是一个例子:

var exampleResource = {
    hello: 'world',
    goodbye: 'drowl'
};

ko.bindingHandlers.resource = {
    update: function (element, valueAccessor) {
        var key = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.text.update(element, function() { 
            return exampleResource[key] || key;
        });
    }
};

ko.applyBindings({ myObs: ko.observable('goodbye') });

span { font-weight: bold; color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

Static: <span data-bind="resource: 'hello'"></span>
<hr>
Dynamic: <span data-bind="resource: myObs"></span>
- based on: <select data-bind="value: myObs, options: ['hello', 'goodbye']"></select>

如果您不需要这种动态性，您可以坚持使用旧的解决方案。然而，在这种情况下，我会质疑 KnockoutJS 对一般资源的附加值(value):-)