Question

我对KO很陌生，所以如果可能的话，我现在就跳过工作示例。我有以下html代码段：

<input data-bind="textInput: Team" id="selected-team"/>
<div class="dropdown-wrapper dd-hide">
  <div data-bind="foreach: $root.koCollection">
    <div data-bind="text: Team, click: $root.SetNewTeam" ></div>
  </div>
</div>

所以这是在另一个foreach里面，Team里面的<input>是一个保存的值，之后我会渲染所有可用的团队。我不是在这里使用dropdwon菜单，即使它一切都发生得非常快，因为我想应用大量的自定义CSS，结果是使用<select>和<option>设置一个真正的下拉列表是非常有限的选择。

然而，这很好用，我得到了已保存的团队和其他团队的div列表，按照我的要求设置。在click事件中我有这个：

function SetNewTeam(data) {
    ko.applyBindingsToNode(document.getElementById('selected-team'), { text: data.Team });
}

在我可以看到文本被更改的范围内工作，但是当我尝试保存时，更改未应用，并且在保存后我返回旧值。但是，如果我只是手动编写一个团队并保存它，这实际上会更新模型，因此在保存后我会回到新团队，但这会打破整个想法来模拟下拉体验。

我尝试使用valueUpdate但由于某种原因它打破了HTML的呈现，而且我也不确定，因为它只有4个事件，无论如何都会有所帮助。

此外，结构不是强制性的，我在这里使用<input>只是为了尝试我会以某种方式让它工作，在此之前我尝试使用div，但同样，值在视觉上改变了但模型没有更新。我怎样才能做出像这样的工作？

更多信息：

我刚发现的一点是，如果在function SetNewTeam(data) {..的末尾我添加$(function() {$('#selected-team').change()});，这实际上会强制淘汰更新模型。但这对我来说似乎很不好看。有没有一些淘汰方式呢？

当文本从另一个事件更改时更新knockout属性

0 个答案: