javascript - knockout : Update to Text box value is not updating the observable item

Question

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

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

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

这里是代码片段。

 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);
}

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

Answer 1

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

阅读有关绑定(bind)上下文的所有内容 here .

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

编辑:

1. 无需使用 new 在 observable 上创建。
2. $root 指的是主 viewModel。当我们想要从子/后代的 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>