简单的kickout.js不起作用

Question

我正在尝试用最简单的敲门（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>

Answer 1

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

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

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

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

而且仍然可以正常工作。

Answer 2

一些东西：

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

这证明在这些更改之后它可以起作用：

 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>