Ray Cheng Ray Cheng - 1 year ago 100
jQuery Question

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

In knockout's documentation, it mentions

. I was trying to add
attribute value without succeed.

Here's the sample from the doc:

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

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

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 Source

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/