Question

如何在UI部分更新淘汰赛js observablearray。我正在编辑一个项目并在更新功能中我尝试更新特定项目，以便我将当前项目对象发送到服务并获取更新后的值响应。在响应中我需要更新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的{{1}}分配项目，因此observable在更改时不会更新。

我做了一些重命名，因为我发现它与许多名为UI的内容混淆，但第一个更改是你的阵列设置：

'Role'

我还修改了更新功能：

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

请参阅 Updated Fiddle

<强>更新

您的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; } } }响应应填充json correclty，但在更新后将其设置回来时可能会遇到问题，请尝试设置属性而不是覆盖元素：

observableArray

请参阅 Updated Fiddle

如何在UI部分更新knockout js observablearray的编辑项目？

1 个答案: