knockoutjs你好世界不会运行

时间:2016-11-30 02:51:49

标签: knockout.js

我是Knockout的新手,已广泛阅读帖子,但无法在Visual Studio 2015中运行简单示例。

总是在调试器中将所有html标记标记为类型或命名空间问题,并且在运行时,我看到空框。

以下是代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Home Page</title>
    <script type='text/javascript' src='jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='knockout-20.3.0.debug.js'></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>

<script type="text/javascript">
    // Here's my data model
    function viewModel() {
        this.firstName = ko.observable('Planet');
        this.lastName = ko.observable('Earth');
        this.fullName = ko.computed(function() {
            // Knockout tracks dependencies automatically.
            return this.firstName() + " " + this.lastName();},this);
        };

    ko.applyBindings(viewModel()); // This makes Knockout get to work
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我检查了你的例子它工作正常,如果把正确版本的淘汰赛。我把版本更旧。请检查你的淘汰脚本src,我希望它会对你有所帮助。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Home Page</title>
        <script type='text/javascript' src='https://code.jquery.com/jquery-1.10.2.min.js'></script>
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-debug.js'></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>

        <script type="text/javascript">
            // Here's my data model
            function viewModel() {

                this.firstName = ko.observable('Planet');
                this.lastName = ko.observable('Earth');
                this.fullName = ko.computed(function() {
                    // Knockout tracks dependencies automatically.
                    return this.firstName() + " " + this.lastName();},this);
                };

            ko.applyBindings(new viewModel());
        </script>
    </body>
</html>