简单的 knockout.js 不起作用答案

【问题标题】：Simple knockout.js doesn't work简单的 knockout.js 不起作用
【发布时间】：2016-01-18 19:00:06
【问题描述】：

我正在尝试最简单的 knockout.js 示例，但它不起作用（名字和姓氏保持为空）。我将脚本标签放在使用绑定的 html 标签之后，并在页面加载后调用 ko.applyBindings。警报起作用，因此函数会触发。有什么帮助吗？

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<script type="text/javascript' src='js/knockout-3.4.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function AppViewModel() {
    alert("b");
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

$(window).load(function() {
    ko.applyBindings(new AppViewModel());
});
</script>

编辑这个问题解决了，但我还有一个。如果我想在单击按钮后（而不是在输入失去焦点时）同时添加名字和姓氏，该怎么办？

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<a class="btn btn-primary btn-lg"  role="button"  >Add</a>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>


<script type="text/javascript" src="js/knockout-3.4.0.js"></script>
<script type="text/javascript">

function AppViewModel() {
  this.firstName = ko.observable();
  this.lastName = ko.observable();
}

ko.applyBindings(new AppViewModel());

</script>

【问题讨论】：

如果将$(window).load 更改为$(document).ready 会发生什么？
没有变化

标签： javascript knockout.js

【解决方案1】：

您的脚本标签中有不匹配的引号。应该是：

<script type="text/javascript" src="js/knockout-3.4.0.js"></script>

您实际上可以完全删除 type 属性并执行以下操作：

<script src="js/knockout-3.4.0.js"></script>

它仍然可以正常工作。

【讨论】：

@suue 尝试删除$(window).load。我让它工作here。
还是什么都没有。会不会是我使用velocity创建html的原因造成的？
@suue 我不知道速度是什么。打开控制台（按 F12），看看那里是否有任何错误。
你能看看我编辑的帖子，看看你能不能帮忙？
@suue 我不确定“同时添加名字和姓氏”是什么意思。更重要的是，您应该发布一个新问题，而不是编辑您当前的问题。

【解决方案2】：

一些事情：

我建议先加载jQuery;
使用$(document).ready（或等效的：$(function() ...）代替$(window).load；
修复script标签中的引号；
确保正在加载 Knockout（您不使用 CDN 链接，您有一个用于 jQuery 的链接）；

以下证明在这些更改之后它可以工作：

function AppViewModel() {
    alert("b");
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

$(function() {
    ko.applyBindings(new AppViewModel());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

【讨论】：