valueUpdate afterkeydown не работает с наблюдаемым массивом

Question

Я работаю над проектом, в котором пользователь может добавлять или удалять «активы». Активы хранятся в наблюдаемом массиве и отображаются как DIV на странице. Каждый ресурс DIV можно перетаскивать и изменять, используя jQuery.

У меня 4 текстовых входов, один для ширины, высоты, сверху и слева, которые относятся к размеру DIVS и позиции:

<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" /> 

Текстовые входы связанного приложения к значениям актива в массиве , а массив также обновляется с помощью JQuery, когда DIV изменяется или перемещено:

$(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/)

Я действительно надеюсь, что кто-то может объяснить мне, что я делаю неправильно!

Answer 1

Потому что после того, как вы создаете новый актив, вы перезаписать свои наблюдаемые с простыми значениями:

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

    self.assets.push(newAsset); 
} 

Это позволит устранить проблему с значения не обновляется.

Edit: Вы также делать то же самое в пользовательских привязок:

//viewModel.assets()[viewModel.selectedIndex()].top = position.top; 
viewModel.assets()[viewModel.selectedIndex()].top(position.top);