asp.net-mvc - 別の部分ビュー (MVC) からビューモデルのオブザーバブル配列にアイテムを追加する

Question

私はノックアウトJSが初めてです。ノックアウトJSを実装したいMVCアプリケーションに取り組んでいますが、シナリオは少し異なります。

リストを表示しているページがあります。ページに 3 つのリンクがあり、それらをクリックすると、それに応じてページに部分ビューが追加されます。私がやりたいことは、値/データを部分ビューに追加するたびに、ページ上のリストをノックアウトで更新する必要があるということです。つまり、部分ビューからデータを保存するときに、監視可能な配列に値を追加したいと考えています。

これが可能かどうか、または jquery のみに保持する必要があるかどうかを教えてください。

コードは次のとおりです。

メイン ビュー:

<input type="button" value="Add Partial View" onclick="LoadPartial();" />
<div id="dvContent"></div>
<h4>People</h4>
<ul data-bind="foreach: people">
<li>
    Name at position <span data-bind="text: $index"> </span>:
    <span data-bind="text: name"> </span>
    <a href="#" data-bind="click: $parent.removePerson">Remove</a>
</li>
</ul>
<button data-bind="click: addPerson">Add</button>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script>
function LoadPartial() {
    $.ajax({
        url: "/home/index",
        dataType:"html",
        type: "GET",
        success: function (data) {
            $("#dvContent").html(data);
        }
    });
}
</script>
<script>

function AppViewModel() {
    var self = this;

    self.people = ko.observableArray([
        { name: 'Bert' },
        { name: 'Charles' },
        { name: 'Denise' }
    ]);

    self.addPerson = function () {
        self.people.push({ name: "New at " + new Date() });
    };

    self.removePerson = function () {
        self.people.remove(this);
    }
}

ko.applyBindings(new AppViewModel());

</script>

部分図:

<table>
<tr>
    <td>Add new Row</td>
    <td><input type="button" value="Add" data-bind="click: addPerson"/></td>
</tr>
</table>

ありがとう、