javascript - 无法让最简单的 knockout.js 示例工作?

标签 javascript html knockout.js

这真的很困扰我。请看一下 Hello World example knockout .js。

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script src="knockout-1.2.1.debug.js" type="text/javascript"></script>

    <script type="text/javascript">
        // Here's my data model
        var viewModel = {
            firstName: ko.observable("Planet"),
            lastName: ko.observable("Earth")
        };
        viewModel.fullName = ko.dependentObservable(function () {
            // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
            return viewModel.firstName() + " " + viewModel.lastName();
        });

        ko.applyBindings(viewModel); // This makes Knockout get to work
    </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>

看来,绑定(bind)不起作用。如果我 alert(viewModel.fullName()); 我会按预期得到“Planet Earth”。但是输入元素和跨度都没有填充数据。

我做错了什么?

Here是一个 zip 文件,其中包含我的文件和 knockout.js

最佳答案

您的问题是您过早地调用了 ko.applyBindings。

您想将脚本标记移动到底部或在 onload 或类似 jQuery 的就绪函数中执行它。

关于javascript - 无法让最简单的 knockout.js 示例工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7154703/

相关文章:

javascript - ko.mapping 未定义

javascript - 从 JSON 文件中 knockout 绑定(bind)

javascript - 函数通过参数决定返回类型

javascript - 在 AngularjS 中更改路由时保持状态

javascript - 计数按钮使用纯 javascript Ajax 将当前页面 URL 传递给 php 变量

javascript - 顶部对齐 flexbox 中的文本

javascript - 设置选定的选项 JQuery

javascript - knockoutjs 删除点击绑定(bind)

javascript - 如何在另一个函数中使用ajax函数响应

html - 样式 ="background-color: #FF0000"在 chrome 或 safari 中不起作用?