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

Question

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

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

Javascript

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

我想要的是动态添加和删除“数据文本”属性并用属性值填充它textMessage。

现在，它输出的布尔结果hasText && textMessage：

<div data-text='0' />

或者

<div data-text='1' />

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

Answer 1

您需要创建一个计算的可观察属性，然后将其绑定到您的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。