2

我正在开发一个用户可以添加或删除“资产”的项目。资产存储在可观察数组中，并在页面上显示为 DIV。可以使用 jQuery 拖动每个资产 DIV 并调整其大小。

我有 4 个文本输入，一个用于宽度、高度、顶部和左侧，它们与 DIV 的大小和位置有关：

<label for="asset-position-top">Top:</label>
<input type="text" name="asset-position-top" value="0" size="6" id="editor-assetTop" data-bind="valueUpdate: 'afterkeydown', value: assets()[selectedIndex()].top"/>
<br />

<label for="asset-position-left">Left:</label> 
<input type="text" name="asset-position-Left" value="0" size="6" id="editor-assetLeft" data-bind="value: assets()[selectedIndex()].left, valueUpdate: 'keyup'"/>
<br />

<label for="asset-size-width">Width:</label> 
<input type="text" name="asset-size-width" value="0" size="6" id="editor-assetWidth" data-bind="value: assets()[selectedIndex()].width, valueUpdate: ['afterkeydown', 'input']" />
<br />

<label for="asset-size-height">Height:</label> 
<input type="text" name="asset-size-height" value="0" size="6" id="editor-assetHeight" data-bind="valueUpdate: 'afterkeydown', value: assets()[selectedIndex()].height" />

文本输入绑定到数组中资产的值，当 DIV 调整大小或移动时，数组也会通过 JQuery 更新：

$(element).draggable({
    drag: function() {
        // ADD DRAG UPDATE HERE
        var position = $(this).position();
        viewModel.assets()[viewModel.selectedIndex()].top = position.top;
        viewModel.assets()[viewModel.selectedIndex()].left = position.left;
    }
}).resizable({
    resize: function() {
        // ADD RESIZE UPDATE HERE   
        viewModel.assets()[viewModel.selectedIndex()].width = $(this).width();
        viewModel.assets()[viewModel.selectedIndex()].height = $(this).height();
    }
})

一切正常，但是当用户更改文本框中的值时，我希望 DIV 立即更改。环顾四周后，我看到了许多使用 valueUpdate 属性的示例。我尝试使用它（并且有几种变体），但仍然只有当我单击 div 时才会更新 DIV。

我创建了一个 jsFiddle 来展示我在做什么并且它不起作用：http: //jsfiddle.net/bu3sD/2/

（这是一个我发现确实有效以及我想要实现的示例：http: //jsfiddle.net/fgpJn/）

我真的希望有人能向我解释我做错了什么！

4

1 回答 1

0

因为在创建新资产后，您将使用普通值覆盖您的 observables：

self.addAsset = function(type, element, cssClass){
    var newAsset = new Asset();
    //newAsset.id = assetIdIncrement();
    newAsset.id(assetIdIncrement());
    ...

    self.assets.push(newAsset);
}

这将解决您的值未更新的问题。

编辑：您也在自定义绑定中做同样的事情：

//viewModel.assets()[viewModel.selectedIndex()].top = position.top;
viewModel.assets()[viewModel.selectedIndex()].top(position.top);
于 2013-09-15T18:17:11.260 回答