Ray Cheng Ray Cheng - 2 months ago 20
jQuery Question

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
}

Answer

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/