简体   繁体   English

基于第一个淘汰教程,为什么我的代码没有运行?

[英]Based on the first knockout tutorial, why is my code not running?

I understand how the tutorial works on the page, but I'm trying to set one up locally to create a calculator and can't get knockout.js to work. 我理解该教程在页面上是如何工作的,但我试图在本地设置一个来创建一个计算器,并且无法让knockout.js工作。 It doesn't initialize or populate like the knockout.js online tutorial. 它没有像knockout.js在线教程那样初始化或填充。

HTML 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>

I'm using knockout.js version 2.1.0. 我正在使用knockout.js版本2.1.0。 As for location of the src it is correct. 至于src位置,这是正确的。

Folder Structure 文件夹结构

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

Any suggestions? 有什么建议?

If you're not using jquery, don't load it specially for this. 如果您没有使用jquery,请不要专门为此加载它。 Instead you can activate knockout on window.onload. 相反,你可以在window.onload上激活knockout。 Example: 例:

Wrap your ko.applyBindings call in a function: 在函数中包装ko.applyBindings调用:

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

Pass the name of your "start" function to window.onload. 将“start”函数的名称传递给window.onload。 Note, don't add the () to the function name. 注意,不要将()添加到函数名称中。 This prevents the function executing immediately, and instead ensures it is called as a callback function when the window is loaded. 这可以防止函数立即执行,而是确保在加载窗口时将其作为回调函数调用。

window.onload = startKnockout;

You are applying the bindings in a header script tag so there are not yet any elements to bind to at the point that your ko.applyBindings(new AppViewModel()) line runs. 您正在标头脚本标记中应用绑定,因此在您的ko.applyBindings(新的AppViewModel())行运行时,尚未绑定任何元素。

You can provide a callback for the JQuery Window.load function to ensure that everything is properly loaded before the bindings get applied. 您可以为JQuery Window.load函数提供回调,以确保在应用绑定之前正确加载所有内容。 Example: 例:

<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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM