Question

I have a html element which looks like this:

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

Javascript

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

What i want, is to dynamically add and remove the ‘data-text’ attribute and populate it with the value of textMessage property.

Right now, it outputs the boolean result of the hasText && textMessage:

<div data-text='0' />

or

<div data-text='1' />

How can I dynamically remove or add the attribute and populate it with the data?

Answer 1

You need to create a computed observable property and then bind that to your data-text attribute:

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
});

And then your binding will look like:

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

Demo JSFiddle.