logo标签列表

Node，express和jade渲染的页面无法与knockout.js数据绑定

javascriptnode.jsknockout.jspug
3
我是一个使用express渲染jade模板的Node服务器。我想让客户端使用knockout.js，但视图从未更新...控制台没有出现任何错误，我就是不能弄清楚哪里出了问题。
页面：
extends layout

    block content

    script(src='knockout/knockout-2.2.1.debug.js', type='text/javascript')
    script(src='js/app.js', type='text/javascript')

    p Hi,
        strong(data-bind="text: firstName")

渲染后的 HTML：

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="/stylesheets/style.css">
    </head>
    <body>
        <script src="knockout/knockout-2.2.1.debug.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>

        <p>Hi,<strong data-bind="text: firstName"></strong></p>

    </body>
</html>

app.js:

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

ko.applyBindings(new AppViewModel());

这里我是否有所遗漏，或者使用Node.js和express无法实现这一点？

你是否检查了实际的HTML输出，以确保所有内容都看起来正常？ - GotDibbs
1
我已经更新了帖子并附上了渲染后的HTML。 - Moriya
+1 for问题 - 我只是想知道Jade是否能与Knockout.js配合使用，所以在开始工作之前不必测试它 :) - fider
2个回答
3

在DOM已经加载完毕后，务必确保调用ko.applyBindings()。

可以将app.js中的代码包装在window.onload、jQuery的ready()函数内，或将脚本标签移动到<p>Hi,<strong data-bind="text: firstName"></strong></p>下面。

-2

// 这是我的 JS 文件 (function () {

//START THE APP WHEN DOCUMENT IS READY
$(function () {
    function AppViewModel() {
        var self = this;
        self.firstName = "Hamza";
       // self.lastName = ko.observable("Bertington");
    }
    ko.applyBindings(new AppViewModel());
});

})();

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接