けさらんぱさらん

方向性は定めず、ただ思いつくままに

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

こんな感じでかけます。
これですっきり