0

我是 Knockoutjs 的新手，从http://learn.knockoutjs.com/ 教程开始，但是当我在本地尝试时也是如此，它不起作用。

我需要将模型和视图写在单独的文件中还是相同的文件中，我的问题是如何运行第一个淘汰赛程序。

<!DOCTYPE HTML>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js'></script>
        <script type="text/javascript">
                    // Here's my data model
            var ViewModel = function(first, last) {
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);
                this.fullName = ko.computed(function() {
                    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                    return this.firstName() + " " + this.lastName();
                }, this);
            };

            ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work​​​​​​​​​​​​​​​​​​
            </script>
    </head>
    <body>
            <div class='liveExample'>   
    <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>  
</div>​
    </body>
</html>
4

1 回答 1

3

您应该放在ko.applyBindings页面末尾。以下是来自官方文档的引用：

要激活 Knockout，请将以下行添加到块中：

ko.applyBindings(myViewModel);

您可以将脚本块放在 HTML 文档的底部，也可以将其放在顶部并将内容包装在 DOM-ready 处理程序中，例如 jQuery 的 $ 函数。

所以代码应该如下所示：

<!DOCTYPE HTML>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js'></script>
    </head>
    <body>
       <div class='liveExample'>   
           <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>  
       </div>​
       <script type="text/javascript">
            // Here's my data model
            var ViewModel = function(first, last) {
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);
                this.fullName = ko.computed(function() {
                    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                    return this.firstName() + " " + this.lastName();
                }, this);
            };

            ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work​​​​​​​​​​​​​​​​​​
       </script>
    </body>
</html>

这是工作小提琴：http: //jsfiddle.net/vyshniakov/s2LSE/

于 2012-10-22T08:35:48.023 回答