5

我试图创建一个与 jquery ui 可调整大小的小部件的淘汰赛绑定。我的自定义绑定绑定到视图模型上的 2 个不同的 observable，即“left”和“width”。

<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 个 observables 被更新，从而在同一个绑定中触发 2 个更新。我需要它来触发一次更新。

对于这种绑定，我有哪些选择？创建绑定到多个可观察对象的绑定的推荐方法是什么？

我的真实世界代码更复杂，但我认为 iv 将我的问题归结为这个小提琴：

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

4

1 回答 1

3

您是否尝试过使用 Michael Best 的 Knockout Deferred Updates 插件？

这是一个更新的小提琴：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 回答