例子之前和之后的Knockout.js？

Question

我通过在线教程学习Knockout.js，即使我理解它们，我也不会完全看到它如何让事情变得更容易。

例如即使我理解这个http://jsfiddle.net/rniemeyer/LkqTU/

    this.firstName = ko.observable(first);

我不知道它是如何显着改善这样的http://jsfiddle.net/rniemeyer/LkqTU/

function updateBox2() {  var x=document.getElementById("first1");
document.getElementById('full').innerText = x.value}

但这当然是一个非常基本的例子。 （这里的代码示例不太好，最好查看jsfiddle）。

所以我的问题是，是否有人拥有代码示例，其中第一个代码使用常规javascript执行操作，第二个代码执行相同但这次使用knockoutjs并清楚地显示它是如何改进的？

Answer 1

我试图了解数据绑定模式如何简化客户端开发，而不是尝试将vanilla JavaScript与KnockoutJS进行比较。

您是否认为您的UI会自动对模型更改做出反应，反之亦然？你能想象通过配置整个绑定吗？

使用数据绑定，您的JavaScript很少需要操纵DOM，因为正确的KnockoutJS绑定将为您处理很多事情而无需您的干预。

因此，您将精力集中在操纵模型作为对UI更改的响应（由KnockoutJS调用）。当您更改模型时，UI会自动更改。

例如，如果将名为items的可观察数组绑定到这样的视图：

<ol data-bind="foreach: items">
   <li data-bind="text: $data"></li>
</ol>

...并且您希望在视图中显示3个项目，它只是这样做：

viewModel.items.push("Hello");
viewModel.items.push("world");
viewModel.items.push("!");

KnockoutJS将新的<li />元素添加到您的有序列表中，因为UI会对整个items数组更改做出反应。

现在尝试使用你的思想，无形，像水一样，我很确定你应该能够比较不使用数据绑定所需的额外工作，以及使用这种方法可以在实际项目中保存多少代码行！