剔除-计算的可观察输入未更新

Question

我有一个动态的项目列表（observableArray），想一次编辑一个。 将输入字段值绑定到计算后，它似乎只在第一次工作。 对选定元素的进一步更改不会更新输入字段。 这是代码：

<DOCCTYPE html>
<html><head>
<script src="jquery-2.1.0.min.js"></script>
<script src="knockout-3.1.0.debug.js"></script>
<style>
.active { background: #EE0; }
</style>
</head><body>
<table><thead><tr>
<th>#</th>
<th>Element ID</th>
</tr></thead>
<tbody data-bind="foreach: elements">
  <tr data-bind="css: { active: ((sel() ? sel().id:'') === id) }, click: selectElement">
  <td data-bind="text: $index"></td>
  <td data-bind="text: id"></td>
</tr>
</tbody></table>
<button data-bind="click: createNew">New element</button>
<h2>Edit current selection</h2>
<label>Color</label><input type="text" data-bind="enable: sel() !== null, value: editColor">
<script>
var elements = ko.observableArray();
var sel = ko.observable(null); // currently selected element

var editColor = ko.computed({
  read: function(){
    if (!sel()) return '-null-'; // !!! here I'm expecting that due to fact I'm using this observable element inside this computable will be re-eavlued whenever I change sel element and therefore input field will be updated as well
    return sel().color;
  },
  write: function(val){
    sel().color = val;
    $('#' + sel().id).css('background-color', val);
  }
});

function selectElement(el){
    sel(el);
}

function createNew(){
  var id = 'id_' + (Math.floor(Math.random() * 9000) + 1000); // kinda uniq
  var newElement = {
    id: id,
    color: ''
  };

  var d = document.createElement('div');
  d.setAttribute('id', id);

  newElement.dom = d;

  $(d).css('width', '100')
 .css('height', '100')
 .css('border', '1px solid #000');

  document.body.appendChild(newElement.dom);

  elements.push(newElement);
  sel(newElement); // here I'm requesting input value to change
}

$(function(){
    ko.applyBindings(window);
});
</script>
</body></html>

重现步骤：

1）单击“新建”-请注意，输入字段值已如预期的那样从-null-更改为空字符串。 那是读

2）在#ABC之类的文本字段中输入一些值-值已正确更改

3）再次点击“新”-现在应该更改输入框中的值，因为el（）现在指向我的新元素。 为什么不发生呢？

我的问题是-我将sel（）更改为新值，这是读取的计算函数中的依赖项。 为什么只工作一次？ 在这种情况下是否有更好的方法？

Answer 1

原因是单击“新建元素”按钮，当前选定的元素保持不变。 添加以下行函数可解决此问题（在此处提示。这只是代码的复制粘贴。没有拆分HTML / JS / CSS）。 但是您仍然可以更好地实现整个页面。（只是说）

function createNew(){
    sel(null);
  var id = 'id_' + (Math.floor(Math.random() * 9000) + 1000); // kinda uniq
  var newElement = {
    id: id,
    color: ''
  };

剔除-计算的可观察输入未更新

问题描述

1 个解决方案

解决方案1
0 2014-03-17 17:48:59

剔除-计算的可观察输入未更新

问题描述

1 个解决方案

解决方案1 0 2014-03-17 17:48:59

解决方案1
0 2014-03-17 17:48:59