如何从编辑模式更新可观察数组上的单个行/项?

时间:2013-07-09 16:03:59

标签: knockout.js

我有一个可观察的数组“用户”,它在显示时基本上就是一个网格。用户将单击LoginId的链接,该链接将打开模型以编辑单个用户(名字,姓氏,以及不在网格视图上的更多内容等)。如果用户在编辑模式上更改了FirstName,我希望它在成功保存后反映在网格上。我已经看到了两种方法:使用arrayFirst查找并删除/重新添加用户到网格或使可观察数组中的每个项目都可观察。我不确定什么是让它工作的最佳方法以及如何正确设置observable数组observable,如果这是最好的方法。

function UserViewModel() {    

                var self = this;

                //data which is populated on a load AJAX function => self.users(msg.d);
                self.users = ko.observableArray([]);                   

                self.updateUser = function () {
                    //set edit modal elements
                    self.editFirstName(this.FirstName);
                    //set the rest for edit
                    //open modal, user edits 'editFirstName' and hits save
                    //data saved to DB
                    //now I want to update the FirstName the user edited in the users array so I don't have to repull all users in the grid

                   }

}

HTML片段

<tbody data-bind="foreach: users">
            <tr>
                <td class="border-left"><a href="#"  data-bind="text: LoginId,click: $parent.updateUser"/></td>
                <td data-bind="text: FirstName"/>
                <td data-bind="text: LastName"/>
                <td data-bind="text: EmailAddress"/>
                <td data-bind="text: AccessLevel"/>                  
                <td data-bind="text: Status" class="border-right" />
            </tr>
            </tbody>

1 个答案:

答案 0 :(得分:3)

如果希望在更改值时更新表,则表绑定的属性必须为observables。你没有发布你的User课程,所以我不知道是不是这样,但看起来应该是这样的:

var Person = function(data) {
    var self = this;
    self.loginId = data.loginId;
    self.firstName = ko.observable(data.firstName);
    self.lastName = ko.observable(data.lastName);
    self.emailAddress = ko.observable(data.emailAddress);
    self.accessLevel = ko.observable(data.accessLevel);
    self.status = ko.observable(data.status);
};

更改这些值时,表格应该更新。在this fiddle

中查看