如何在UI部分中更新敲除js observablearray的编辑项？

Question

How to update the knockout js observablearray in UI part..Initially Im editing a item and in update function i'm trying to update a particular item so im sending the current item object to service and getting the updated vales as response. Inside the response I need to update the observablearray as well the UI too.. I have tried some thing like this and its not working for me... please check in 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

Your issue is that your are assigning items to your observable array that aren't themselves observable , so your UI is not updating when they change.

I did some renaming, as I found it confusing with so many things named 'Role' , but the first change was your array setup:

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

I also modified the update function:

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;
        }
    }
}

See the Updated Fiddle

Update:

Your json response should populate the observableArray correclty, but you may have an issue when setting it back after the update, try setting the properties rather than overwriting the element:

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;
        }
    }
}

See the Updated Fiddle