1

我是淘汰赛的新手。我正在开发一个 MVC 应用程序，我想在其中实现 knockoutJS，但情况有点不同。

我有一个显示列表的页面。我在页面上有 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>

谢谢， JsHunjan

4

1 回答 1

0

使用 Knockout 很容易完成。如果您想获得一些帮助，您需要显示一些您尝试过的代码。我将发布一个一般性答案，但它不会完全解决您的用例，只是基本上 -

创建一个对象来保存您的新项目，您可以在父视图模型或子视图模型中执行此操作，但如果您在子视图模型中执行此操作，则需要将其传递回父视图。

在子视图模型中点击保存按钮或添加或任何内容后，只需在您创建的 observableArray 中执行 .push()... - myObservableArray.push(newItem());

Knockout 将识别发生的所有更改并自动执行您想要的操作。

希望这可以帮助。

于 2013-09-18T17:36:36.053 回答