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

【问题标题】：jQuery Knockout - dynamic add and remove html attributesjQuery Knockout - 动态添加和删除 html 属性
【发布时间】：2013-01-04 10:56:49
【问题描述】：

我有一个看起来像这样的 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' />

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

【问题讨论】：

hasText 是否依赖于某些复选框选择？

标签： jquery knockout.js knockout-mapping-plugin

【解决方案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.

【讨论】：