14

オブザーバブルのノックアウトに値がバインドされている属性を持つ要素があります。

<text transform='matrix(1 0 0 1 1 1)' data-bind='attr:{transform:textTransform}'></text>

要素が読み込まれると、オブザーバブルにdom要素で定義された値が含まれるようにしますが、代わりに未定義として読み込まれ、属性がdom要素から完全に削除されます。

<text data-bind='attr:{transform:textTransform}'></text>

dom要素属性から観察可能なノックアウトの値を初期化し、dom要素属性の値も保持することは可能ですか？

更新： http： //jsfiddle.net/5Z2SC/10/

4

2 に答える 2

19

別のオプションは、カスタムバインディングを使用し、init関数で要素の現在の値を収集することです。私の意見では、これははるかに再利用可能です。

ko.bindingHandlers.transform = {
    init: function(element, valueAccessor) {
        valueAccessor()(element.getAttribute('transform'));
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.setAttribute('transform', ko.utils.unwrapObservable(value))
    }
};

もちろん、この変換プロパティを使用して何かを実行する必要があるため、より複雑になります。そのロジックはおそらくセクションに入れたいと思うでしょうupdate。

于 2012-07-17T16:23:34.257 に答える
5

ko.applyBindings() を呼び出すまで、データ バインド属性は解析されません。したがって、要素から属性データを取得する必要がある場合は、次のように実行できます。

function MyModel(){
    this.textTransform = ko.observable($('#myElement').attr('transform'));
}

ko.applyBindings(new MyModel());

基本的に、属性の値を取得し、それをオブザーバブルの初期値として設定します。データ バインド属性はテンプレートであるため、ViewModel で初期値または既定値を指定する必要があります。

もう1つのオプションは、オブザーバブルがnullを返す場合にデフォルトを保存できるカスタムバインダーを作成することです...

于 2012-07-17T16:02:46.533 に答える