3

Knockoutjsの使い方を学ぼうとしていますが、問題が発生しています

これはシナリオです：

KnockoutjsviewModelを次のように定義するページがあります

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

すべてが1ページにあり、機能するテストページを作成しました

<!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 に答える