1

私がやりたいのは、(上、左、幅、高さ、zIndex) スタイル属性を追跡することです。しかし、これらのスタイルを保持する要素は、サード パーティのコードが取り込まれるまで存在しないため、通常の方法では実行できません。

これが私がこれまでに得たものです：

    my.Module = function (module) {
    return {
            top: ko.observable(200);,
            left: ko.observable(100);,
            width: ko.observable(100);,
            height: ko.observable(100);,
            zIndex: ko.observable(0);,
        };
    };

これは通常のバインディング コンテキストです。

<div data-bind="style:{width:width, top:top, left:left, height:height, zindex:zIndex}"></div>

しかし、サードパーティのものは、divをラップして別のものに渡します。これは私が変更できないものです。その代わりに、カスタム バインディング ハンドラの作成を開始しました。

 ko.bindingHandlers.Window = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());

            //Do third party creation stuff here...

            ko.applyBindingsToNode(elemToActuallyWatch, {
                style: {
                    width: value.width() + 'px',
                    height: value.height() + 'px',
                    top: value.top() + 'px',
                    left: value.left() + 'px',
                    zIndex: value.zIndex()
                }
            });
        },

これで上記のスタイルが適切な div に適用されますが、データが変更されたときと要素が変更されたときに上記の値を変更する必要があります。

端に付けなければならない「px」は必要ないと思いますが、それが適用できる唯一の方法でした。

この時点から、ドラッグ可能でサイズ変更可能なjqueryUIを使用していて、ユーザーが要素を移動/サイズ変更して、値がビューモデルデータを自動的に更新すると言う方法はありますか? もちろん、非 jquery 固有の回答が最適です。

4

1 に答える 1

0

styleモデルからビューへの一方向バインディングです。ビューからモデルを更新しません。おそらく、resizeオプションを使用して、そこからモデルを更新する必要があります。

于 2012-11-19T23:48:43.277 に答える