4

我了解该教程在页面上的工作原理，但我试图在本地设置一个以创建计算器，但无法让 knockout.js 工作。它不像 knockout.js 在线教程那样初始化或填充。

HTML

<html>
<head>
    <script type="text/javascript" language="javascript" src="../knockout-2.1.0.js"></script>
    <script type="text/JavaScript" language="javascript">
        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");
        }
        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    </script> 
</head>
<body class="calc" onLoad="createnav()">

<div id="all">

    <div id="calc">

        <p>First name: <strong data-bind="text: firstName"></strong></p>
            <p>Last name: <strong data-bind="text: lastName"></strong></p>

            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
    </div>
    <div id="info">
       <!-- outputs will be here -->
    </div>
</div>
</body>
</html>

我正在使用 knockout.js 版本 2.1.0。至于src它的位置是正确的。

文件夹结构

  ----------
  | Root   |
  ----------_____________________
     |                             |
   -------------------        ------------       ---------------
  | knockout-2.1.0.js |      |  pphcalc   | ___ | HeroPilot.asp |
   -------------------        ------------       ---------------

有什么建议么？

4

2 回答 2

1

如果您不使用 jquery，请不要为此专门加载它。相反，您可以在 window.onload 上激活淘汰赛。例子：

将您的 ko.applyBindings 调用包装在一个函数中：

function startKnockout() {
    ko.applyBindings(new AppViewModel());
};

将“开始”函数的名称传递给 window.onload。注意，不要将 () 添加到函数名称中。这可以防止函数立即执行，而是确保在加载窗口时将其作为回调函数调用。

window.onload = startKnockout;
于 2013-06-05T10:47:52.137 回答
0

您正在头脚本标记中应用绑定，因此在您的 ko.applyBindings(new AppViewModel()) 行运行时还没有任何要绑定的元素。

您可以为 JQuery Window.load 函数提供回调，以确保在应用绑定之前正确加载所有内容。例子：

<script type="text/JavaScript" language="javascript">
    function AppViewModel() {
        this.firstName = ko.observable("Bert");
        this.lastName = ko.observable("Bertington");
    }

    // Activates knockout.js
    $(window).load(function() {
        ko.applyBindings(new AppViewModel());
    });
</script>
于 2012-07-26T15:53:20.643 回答