ノックアウト `options`バインディングを使用するときに` data`属性値を `option`に設定する方法

Question

ノックアウトのdocumentationには、optionsAfterRenderが含まれています。私は成功することなくdata属性値を追加しようとしていました。

ここではドキュメントからのサンプルです：

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

ここに私が試したものですが、うまくいきませんでしたが、またエラーなしで。

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 1

jQueryのは、実際にdata attrを割り当てますが、jQueryの内部データ構造に保存しますので、それがDOM要素の上に表示されません。 最近のデータattrをログに記録すると値が取得されますが、DOMでは表示されません。

例：https://jsfiddle.net/kyr6w2x3/83/

しかし、もしあなたがattr()を使用している場合、それは同様に、DOM属性を更新しません。

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