2

次のような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' />

属性を動的に削除または追加して、データを入力するにはどうすればよいですか?

4

1 に答える 1

3

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のデモ。

于 2013-01-21T11:51:18.577 に答える