简单的淘汰.js不起作用

Simple knockout.js doesn't work

本文关键字：不起作用 js 淘汰 简单      更新时间：2023-09-26

我正在尝试最简单的淘汰示例.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>

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

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

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

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

它仍然可以正常工作。

几件事：

  • 我建议先加载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>

相关文章：