5

jquery uiのサイズ変更可能なウィジェットへのノックアウトバインディングを作成しようとしています。私のカスタムバインディングは、ビューモデルの2つの異なるオブザーバブル、つまり「左」と「幅」にバインドしています。

<div class="layer" data-bind="resizable: {left: left, width: width}">
<div class="left ui-resizable-handle ui-resizable-w"><<<</div>
<div class="right ui-resizable-handle ui-resizable-e">>>></div>
</div>

ko.bindingHandlers.resizable = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var values = valueAccessor();
        $(element).resizable({
            handles: null,
            resize: function(event, ui) {
                values.left(ui.position.left);
                values.width(ui.size.width);
            }
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var values = valueAccessor();
        $(element)
            .css('left', values.left() + 'px')
            .css('width', values.width() + 'px')
            ;
    }
};

var vm = {
    left: ko.observable(50),
    width: ko.observable(300)
    };

ko.applyBindings(vm);

問題は、左側のハンドルを使用して div のサイズを変更すると、2 つのオブザーバブルが更新され、同じバインディングで 2 つの更新がトリガーされることです。更新を 1 回だけトリガーする必要があります。

この種のバインディングにはどのようなオプションがありますか? 複数のオブザーバブルにバインドするバインディングを作成するための推奨される方法は何ですか?

私の実際のコードはもっと複雑ですが、iv は私の問題をこのフィドルに要約したと思います:

http://jsfiddle.net/MatteS75/3dwVp/10/

4

1 に答える 1

3

Michael Best の Knockout Deferred Updates Pluginを試してみましたか?

更新されたフィドルは次のとおりです。http://jsfiddle.net/jearles/3dwVp/11/

必要なのは、ノックアウト後に彼の .js ファイルを含めることだけです。 

<script type="text/javascript" src="knockout-2.1.0.js"></script>
<script type="text/javascript" src="knockout-deferred-updates.js"></script>
于 2012-10-25T10:20:52.083 に答える