敲除：更新到文本框值不更新可观察项

Question

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

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

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

编辑：

无需使用 new 在 observable 上创建。
$root 指的是主视图模型。当我们想从子 s/descendant 的 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>

敲除：更新到文本框值不更新可观察项

Knockout : Update to Text box value is not updating the observable item

html

javascript

data-binding

knockout.js

two-way-binding