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）点击＆＃34; new＆＃34; - 注意输入字段值已经从-null-变为空字符串，正如人们所期望的那样。这是读

2）在#ABC等文本字段中输入一些值 - 正在更改值

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

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

Answer 1

原因是单击New元素按钮，当前选中的元素保持不变。添加以下行函数修复了问题（小提琴here。这只是代码的复制粘贴。没有HTML / JS / CSS分开）。但是你仍然可以更好地实现整个页面。（只是说）

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

knockout - 计算的可观察输入未被更新

1 个答案: