淘汰赛：更新到文本框值不会更新可观察项目答案

【问题标题】：Knockout : Update to Text box value is not updating the observable item淘汰赛：更新到文本框值不会更新可观察项目
【发布时间】：2019-02-10 01:39:23
【问题描述】：

我有一个 ObservavleArray ，它在 UI 加载时用两个项目初始化。

现在有一个添加按钮，可以将新的可观察项推送到可观察数组。这很好用。

但是当我编辑文本框上的值并且我希望它们在底层可观察项上发生变化时，但这不会发生。

这是sn-p的代码。

 var InventoryViewModel = function() {
     var self = this;
     self.STockItems = ko.observableArray();

     InitializeStock(self);

     self.addItems = function(vm) {
         self.STockItems.push(new ko.observable(''));
     }
     self.ProcessInventory = function(vm) {
         console.log(vm.STockItems());
     };
 }

 var vm = new InventoryViewModel();
 ko.applyBindings(vm);


 function InitializeStock(context) {
     context.STockItems.push(new ko.observable('Item1'));
     context.STockItems.push(new ko.observable('Item2'));
 }

li {
    list-style: none;
    margin-top: 10px;
}

.info-text {
    margin-top: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: STockItems">
    <li>
        <span class="input-group">
            <input  data-bind="textInput: $data" />                                       
        </span>

    </li>
</ul>
<div class="text-right"> <a data-bind="click:addItems">+ Add more</a></div>
<button type="submit" class="btn btn-accent" data-bind="click: $root.ProcessInventory">Process Inventory</button>
<pre class='info-text' data-bind="text: ko.toJSON($data, null, '\t')">
</pre>

http://jsfiddle.net/xvza6nu2/1/

编辑： 当我直接推送一个可观察的项目时，我想我不必创建一个包装器来推送这些项目。

function EditableField(initialValue) {
  this.value = ko.observable(initialValue);
}

如果我必须使用这个包装器，那为什么？有什么区别？

【问题讨论】：

标签： javascript html data-binding knockout.js two-way-binding

【解决方案1】：

Observables 需要绑定到视图模型中的属性，这是从 HTML 中引用它们的唯一方法。 $data 是对视图模型上下文的引用，而不是对可观察对象本身的引用。碰巧在您的 foreach 上下文中只有 1 个 observable，所以看起来您的初始设置正在运行。

阅读所有关于绑定上下文here。

要使其正常工作，您需要将对象推送到您的 observableArray 中，并带有稍后将从 HTML 中引用的命名属性。 observableArray 中的每个对象都成为foreach 循环中的迷你视图模型。

编辑：

无需使用new 在 observable 上创建。
$root 指的是主视图模型。当我们想从孩子/后代的 viewModel 中引用它时，使用它很有用。在您的情况下，对于 ProcessInventory 点击，不需要它，因为我们已经在主 viewModel 上下文中。

 var InventoryViewModel = function() {
     var self = this;
     self.STockItems = ko.observableArray();

     InitializeStock(self);

     self.addItems = function(vm) {
         self.STockItems.push({item : ko.observable('')});
     }
     self.ProcessInventory = function(vm) {
         console.log(vm.STockItems());
     };
 }

 var vm = new InventoryViewModel();
 ko.applyBindings(vm);


 function InitializeStock(context) {
     context.STockItems.push({item : ko.observable('Item1')});
     context.STockItems.push({item : ko.observable('Item2')});
 }

li {
    list-style: none;
    margin-top: 10px;
}

.info-text {
    margin-top: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: STockItems">
    <li>
        <span class="input-group">
            <input  data-bind="textInput: item" />                                       
        </span>

    </li>
</ul>
<div class="text-right"> <a data-bind="click:addItems">+ Add more</a></div>
<button type="submit" class="btn btn-accent" data-bind="click: ProcessInventory">Process Inventory</button>
<pre class='info-text' data-bind="text: ko.toJSON($data, null, '\t')">
</pre>

【讨论】：