javascript - knockout : First Name - Last Name Joiner Not Working-6ren

javascript - knockout : First Name - Last Name Joiner Not Working

转载作者：行者123 更新时间：2023-11-28 18:27:16

25

4

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

我尝试稍微改变一下功能来感受 knockout 的感觉。代码看起来不错，但输出没有改变。然后我进行了测试，看看教程中的确切代码是否适合我，但事实并非如此。我很确定我错过了一些非常明显的东西。谁能告诉我那是什么？

这是我的 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).ready equivalent without jQuery 中所述)。

或者，您可以包含行 <script src="knockoutTester.js"></script>位于正文底部(因此仅在加载上面的 DOM 后才加载)

关于javascript - knockout : First Name - Last Name Joiner Not Working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38880791/

25

4

0

文章推荐： python - 尝试在 Qt 中分配无父小部件时的奇怪行为

文章推荐： python - Keras Fit_generator 回调

首页

博学

6Ren·AI

商城

javascript - knockout : First Name - Last Name Joiner Not Working