CODEWITHSUNDEEP
jqueryknockout.js
Ray Cheng
Ray Cheng

Reputation: 12586

How to set `data` attribute value to `option` when using knockout `options` binding

In knockout's documentation, it mentions optionsAfterRender. I was trying to add data attribute value without succeed.

Here's the sample from the doc:

<select size=3 data-bind="
    options: myItems,
    optionsText: 'name',
    optionsValue: 'id',
    optionsAfterRender: setOptionDisable">
</select>

<script type="text/javascript">
    var vm = {
        myItems: [
            { name: 'Item 1', id: 1, disable: ko.observable(false)},
            { name: 'Item 3', id: 3, disable: ko.observable(true)},
            { name: 'Item 4', id: 4, disable: ko.observable(false)}
        ],
        setOptionDisable: function(option, item) {
            ko.applyBindingsToNode(option, {disable: item.disable}, item);
        }
    };
    ko.applyBindings(vm);
</script>

Here's what I tried but didn't work but also no errors.

setOptionDisable: function(option, item) {
    $(option).text(''); // this will blank out the text in options
    $(option).data('test', '123'); // but this won't do anything at all.
    $(option).attr('data-test', '123'); // this worked as pointed out by Matt
}

Upvotes: 1

Views: 1355

Answers (1)

Mateen Kajabadi
Mateen Kajabadi

Reputation: 3634

jQuery actually assigns data attr but it does not show up on DOM element because jQuery saves it in an internal data structure. If you log your recent data attr you will get the value but you won't see on DOM.

Example :https://jsfiddle.net/kyr6w2x3/83/

But if you use attr() it does update the dom attribute as well.

Example https://jsfiddle.net/kyr6w2x3/84/

Upvotes: 2

Related Questions