3

我正在尝试学习使用 Knockoutjs，但我遇到了问题

这是场景：

我有一个页面，我在其中定义了一个 Knockoutjs viewModel，如下所示

$(document).ready(function () {
    var viewModel = {
        selectedColumns: ko.observableArray()
    };
    ko.applyBindings(viewModel);
});

现在有了一个 Ajax 请求，我在页面中添加了一个我想绑定到 viewModel 的复选框

<input type='checkbox' id='someId' data-bind='attr: { value: 'someValue' }, checked: $root.selectedColumns'>

 $(document).ready(function() {
                 ko.applyBindings(viewModel, document.getElementById(someId));
            });

但我总是得到

错误：ReferenceError：未定义 viewModel 源文件：http ://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

我创建了一个测试页面，所有内容都在一个页面上并且可以正常工作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
    <script src="../../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        var count = 0;
        var viewModel = {
            selectedPeople: ko.observableArray()
        };

        $(document).ready(function () {
            ko.applyBindings(viewModel);
        });

        function AddAnotherCheckbox(){

            var id = "checkbox" + count;

            var checknox = count + "   <input type='checkbox' id='" + id + "' data-bind='attr: { value: \"" + count + "\" }, checked: $root.selectedPeople'><br/>";

            $("#container").append(checknox);
            count++;

             $(document).ready(function() {
                 ko.applyBindings(viewModel, document.getElementById(id));
            });
        }
    </script>
</head>
    <body>

        <input type="button" onclick="AddAnotherCheckbox()"/>

        <div id="container"></div>
        <br/>
        <br/>
        <br/>
        <span data-bind="text: selectedPeople"></span> 
    </body>
</html>

但我无法使用局部视图使其工作

你能向我解释什么是问题，我该如何解决？

谢谢

4

1 回答 1

4

描述

这不是关于 Knockout，而是关于一般的 JavaScript。您的测试代码有效，因为您已经定义viewModel了$(document).ready

这是另一个范围。

将这些与 jsFiddles 进行比较

样本

这不起作用

$(document).ready(function () {
    var viewModel = {
        someThing : "Test"
    };
});

$(document).ready(function () {  
    alert(viewModel.someThing);
});

这将起作用

var viewModel;
$(document).ready(function () {
    viewModel = {
        someThing : "Test"
    };
});

$(document).ready(function () {   
    alert(viewModel.someThing);
});

更多信息

​</p>

于 2012-07-27T19:25:42.610 回答