如何更新 UI 部分的淘汰赛 js observablearray 的编辑项？

Question

如何在 UI 部分更新淘汰赛 js observablearray。最初我正​​在编辑一个项目，在更新功能中我试图更新一个特定项目，所以我将当前项目对象发送到服务并获取更新的 vales 作为响应。在响应中，我也需要更新 observablearray 以及 UI。我已经尝试过这样的事情，但它对我不起作用...请签入http://jsfiddle.net/up8rB/20/

<div data-bind="ifnot: Role()">           
 <label for="description">Description</label>
 <input type="text" data-bind="value: Description" class="form-control" placeholder="Enter the description..." />
 <button data-bind="click: $root.create"> Create</button>
</div>
<div data-bind="if: Role">
 <label for="description">Description</label>
 <input type="text" data-bind="value: Role().Description" class="form-control" placeholder="Enter the description..." />
 <button data-bind="click: $root.update"> Save</button>
</div>
<table id="example1" class="table table-bordered table-striped" data-bind="visible: Roles().length > 0">
<thead>
<tr>
<th>RoleID</th>
<th>Description</th>                               
<th>Actions</th>
</tr>
</thead>
<tbody data-bind="foreach: Roles">
<tr>
<td data-bind="text: $data.RoleID"></td>
<td data-bind="text: $data.Description"></td>
<td>
<button data-bind="click: $root.edit" >Edit</button>
<button data-bind="click: $root.delete" >Delete</button>
</td>
</tr>
</tbody>
</table>
function RoleViewModel() {
    var self = this;
    self.RoleID = ko.observable("0");
    self.Description = ko.observable().extend({
        required: { message: 'Please supply description ..' }
    });

var Role = {
    RoleID: self.RoleID,
    Description: self.Description
};
self.Role = ko.observable();
self.Roles = ko.observableArray();
$.ajax({
        url: 'Service.svc/RoleCollection',
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            self.Roles(data); //Put the response in ObservableArray
        }
    });
self.edit = function (Role) {
    self.Role(Role);
}
self.update = function () {
        var Role = self.Role();
        $.ajax({
            url: '..service.svc/UpdateRole',
            cache: false,
            type: 'PUT',
            contentType: 'application/json; charset=utf-8',
            data: ko.toJSON(Role),
            success: function (data) {
                for (var i = 0; i < self.Roles().length; i++) {
                    alert(self.Roles()[i].RoleID());
                    if (self.Roles()[i].RoleID() === data.RoleID) {
                        self.Role(self.Roles()[i]);
                        break;
                    }
                }
            }
        })
}
var viewModel = new RoleViewModel();
ko.applyBindings(viewModel);

Answer 1

您的问题是您将项目分配给您的 observable array，而这些项目本身不是 observable，因此您的 UI 在更改时不会更新。

我做了一些重命名，因为我发现它与许多名为 'Role' 的东西混淆，但第一个更改是您的数组设置：

var roles = [{
    RoleID: ko.observable(1),
    Description: ko.observable('First item')
}, {
    RoleID: ko.observable(2),
    Description: ko.observable('Second item')
}];

我也修改了更新功能：

self.update = function () {
    var _Role = self.Role();
    for (var i = 0; i < self.Roles().length; i++) {
        if (self.Roles()[i].RoleID === _Role.RoleID) {
            self.Roles()[i] = _Role();
            break;
        }
    }
}

见Updated Fiddle

更新：

您的json 响应应该填充observableArray 正确，但是在更新后重新设置它时可能会遇到问题，请尝试设置属性而不是覆盖元素：

self.update = function () {
    var _Role = self.Role();
    for (var i = 0; i < self.Roles().length; i++) {
        if (self.Roles()[i].RoleID === _Role.RoleID) {
            self.Roles()[i].RoleID = _Role().RoleID;
            self.Roles()[i].Description = _Role().Description;
            break;
        }
    }
}

见Updated Fiddle