html - 淘汰赛：该事件不会为另一个 viewModel 触发

Question

这是一个jsFiddle代码。

我有 6 个输入文本，分为 3+3 两个块。

前三个输入文本按预期工作：即使用户键入内容，它们也会显示相同的文本。

我希望另外三个输入文本具有相同的行为，因此每个块都是独立的。不幸的是，第二个块根本不起作用。我错过了什么？

HTML：

<div>
    <!--the first block-->
    <input type="text" data-bind="value:Name, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name, valueUpdate:'afterkeydown'">
<br><br><br>
    <!--the second block-->
    <input type="text" data-bind="value:Name2, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name2, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name2, valueUpdate:'afterkeydown'">        
</div>

JS：

var value="Type here...";
var viewModel={Name:ko.observable(value)};
ko.applyBindings(viewModel);


var value2="Hello John2";
var viewModel2={Name2:ko.observable(value2)};
ko.applyBindings(viewModel2);

Answer 1

您以错误的方式构建视图模型。

您需要一个具有两个属性的视图模型：

var value="Type here...";
var value2="Hello John2";
var viewModel = {
        Name: ko.observable(value),
        Name2: ko.observable(value2)
    };
ko.applyBindings(viewModel);

您可以在文档中阅读更多关于视图模型以及如何使用它们的信息。

演示：http: //jsfiddle.net/d9VkK/