如何在UI部分更新敲除js observalearray的编辑项

Question

如何更新UI部分中的敲除js observalearray。。最初我正在编辑一个项目，在更新功能中，我试图更新一个特定的项目，所以我将当前项目对象发送到服务，并获得更新的值作为响应。在响应中，我需要更新observalearray以及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的observable array，因此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;
        }
    }
}

请参阅更新的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;
        }
    }
}

请参阅更新的Fiddle