淘汰赛:名字-姓氏Joiner不工作

Knockout: First Name - Last Name Joiner Not Working

本文关键字：Joiner 工作 姓氏 名字 淘汰赛      更新时间：2023-09-26

我试图使用knockout并将用户输入的名字和姓氏连接在一起。它基于以下示例:http://knockoutjs.com/examples/helloWorld.html

我试着改变一些功能来获得击倒的感觉。代码看起来不错，但是输出没有改变。然后我测试了教程中的代码是否适合我，但没有。我很确定我错过了一些很明显的东西。有人能告诉我那是什么吗?

这是我的HTML: 
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!--view-->
<head>
    <meta charset="utf-8" />
    <title>Testing Knockout</title>
    <script src="knockoutTester.js"></script>
    <script src="knockout-3.4.0.js"></script>
</head>
<body>
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

</body>                                             
</html>
这是我的JS: 
var ViewModel = function (first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.fullName = ko.pureComputed(function () {
        return this.firstName() + " " + this.lastName();
    }, this);
};    
ko.applyBindings(new ViewModel("Planet", "Earth"));

谢谢

你的JS代码是好的。问题在于您在HTML文件中添加JS文件的顺序:

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

为了使您的代码工作，您需要首先加载Knockout，然后才加载您的自定义代码。因此将以上行改为

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

，它应该开始工作了。

您还需要确保您的自定义JavaScript代码仅在加载DOM之后运行，因为所有DOM元素都应该在脚本运行时加载。您可以使用jQuery的方法$(document).ready或使用任何其他替代方法(例如在$(document)中描述的方法)。没有jQuery的现成等价)。

或者你可以在body的底部包含行<script src="knockoutTester.js"></script>(所以它只在DOM上面加载后加载)

相关文章：