javascript - knockout 中 Attr 绑定(bind)的问题

Question

我正在对数据属性使用 knockout attr 绑定(bind)，例如:

 <div data-bind="attr : { 'data-fire': Fire, 'data-age': Age }">
 </div>

现在我想要的是，如果任何可观察的变量(即Fire and Age)为空或为空，那么我不想添加空属性名称。因此，在应用绑定(bind)后，如果假设 Age 为空，那么我不希望我的标记为:

 <div data-bind="attr : { 'data-fire': Fire, 'data-age': Age }"  data-age data-fire="Yes">
 </div>

相反，我想删除数据时代并想要这个干净的标记:

 <div data-bind="attr : { 'data-fire': Fire, 'data-age': Age }" data-fire="Yes">
 </div>

有没有办法在knockout.js中实现这一点？

Answer 1

您可以使用 custom binding 自行控制:

<div data-bind="addAttributes : { 'data-fire': Fire, 'data-age': Age }"></div>

然后有一个处理程序:

ko.bindingHandlers.yourBindingName = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
    }
};

在这些方法中，仅当值不为空时，您才可以检查值并手动添加属性(例如使用 jQuery)。