Knockout.jsの初期値をDOMから取得する
Knockout.jsを使うときにたまに困るのがDOMの値を初期値にしたい時です。
なんか地道にJQueryでデータを取得してプロパティに代入してたのですが
ちょっと調べてみたらカスタマイズしてDOMからデータを取得することができました。
いろいろやり方はあるのでしょうが、私はこんな感じで実装してみました。
ko.bindingHandlers.valueWithInit = { init: function (element, valueAccessor, allBindingsAccessor, data, context) { var property = valueAccessor(), value = element.value; property(value); ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, data, context); }, update: ko.bindingHandlers.value.update }; ko.bindingHandlers.textWithInit = { init: function (element, valueAccessor, allBindingsAccessor, data, context) { var property = valueAccessor(), text = $(element).text(); property(text); ko.bindingHandlers.text.init(element, valueAccessor, allBindingsAccessor, data, context); }, update: ko.bindingHandlers.text.update }; ko.bindingHandlers.checkedWithInit = { init: function (element, valueAccessor, allBindingsAccessor, data, context) { var property = valueAccessor(), checked = element.checked; property(checked); ko.bindingHandlers.checked.init(element, valueAccessor, allBindingsAccessor, data, context); }, update: ko.bindingHandlers.checked.update };
これをvalueとかtextバインディングみたいに
<input name="FirstName" type="text" data-bind="valueWithInit: firstName">
こんな感じでかけます。
これですっきり