Question

我正在开发一个用户可以添加或删除“资产”的项目。资产存储在可观察的数组中，并在页面上显示为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或移动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/

（这是一个例子，我发现DOES的工作和我想要实现的目标：http://jsfiddle.net/fgpJn/）

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

Answer 1

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

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);

valueUpdate afterkeydown不使用observable数组

1 个答案: