Question

我有一个看起来像这样的html元素：

<div data-bind="attr: { 'data-text': hasText && textMessage }"></div>

的Javascript

var viewModel = {
    hasText: ko.observable(false),
    textMessage: ko.observable()
};

我想要的是动态添加和删除'data-text'属性，并使用textMessage属性的值填充它。

现在，它输出hasText && textMessage：

的布尔结果

<div data-text='0' />

或

<div data-text='1' />

如何动态删除或添加属性并用数据填充它？

Answer 1

您需要创建一个计算的observable属性，然后将其绑定到您的data-text属性：

var viewModel = {
    hasText: ko.observable(false),
    textMessage: ko.observable(),   
};
// the funny syntax is because viewModel is an object literal
viewModel.textAttr = ko.computed(function(){
        // you need to return null or undefinied then KO won't the attribute
        return viewModel.hasText() ? viewModel.textMessage() : null
});

然后您的绑定将如下所示：

<div data-bind="attr: { 'data-text': textAttr }">Div</div>

演示JSFiddle。

jQuery Knockout - 动态添加和删除html属性

1 个答案: