0

重複の可能性:
KnockoutJS: ko.applyBindings to partial view?

jQueryでノックアウトを使用しています。以下の基本的な例の結果、テキスト"Planet Earth"は正常に表示されます (ノックアウトが適切に追加され、機能します!) が、 "Planet2 Earth2"表示されません。また、alert('alert2');解雇されますが、そうでalert('alert3');はありません。誰か私に理由を説明してもらえますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="Scripts/knockout-2.2.1.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        alert("alert1");

        var viewModel = {
            firstName: ko.observable("Planet"),
            lastName: ko.observable("Earth")
        };
        viewModel.fullName = ko.dependentObservable(function () {
            return viewModel.firstName() + " " + viewModel.lastName();
        });

        alert("alert2");
        ko.applyBindings(viewModel);

        alert('alert3');


        var viewModel2 = {
            firstName2: ko.observable("Planet2"),
            lastName2: ko.observable("Earth2")
        };
        viewModel2.fullName2 = ko.dependentObservable(function () {
            return viewModel2.firstName2() + " " + viewModel2.lastName2();
        });

        ko.applyBindings(viewModel2);
    });
</script>
</head>
<body>

<div style="border:1px solid red;">   
<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>

<div style="border:1px solid green;">   
<p>First name: <input data-bind='value: firstName2' /></p> 
<p>Last name: <input data-bind='value: lastName2' /></p> 
<h2>Hello, <span data-bind='text: fullName2'> </span>!</h2>  
</div>

</body>
</html>
4

1 に答える 1

2

機能させるには、次の 4 行を変更する必要があります。

sを適用するにはid:

<div id="one" style="border:1px solid red;">

と

<div id="two" style="border:1px solid green;">

applyBindings の 2 番目のパラメーターを使用します。

ko.applyBindings(viewModel,document.getElementById("one"));

と

ko.applyBindings(viewModel2,document.getElementById("two"));
于 2013-01-18T11:47:33.040 に答える