1

我是 Knockoutjs 的新手。我有一个可观察的用户数组。这是我的用户模型：

function User(data) {
        this.NameID = ko.observable(data.NameID);
        this.UserID = ko.observable(data.UserID);
        this.InTime = ko.observable(data.InTime);
        this.OutTime = ko.observable(data.OutTime);
        this.Notes = ko.observable(data.Notes);
        this.StatusID = ko.observable(data.StatusID);
        this.Status = ko.observable(data.Status);
        this.InOut = ko.observable(data.InOut);
        this.Name = ko.observable(data.Name);
        return this;
    }

然后在我的视图模型中，我创建了一组用户。在我的视图中执行 foreach 以显示表格中的所有用户很容易，但我想制作一个表单，以便当前用户可以更改他的变量。我正在使用会话变量来设置用户 ID。然后我使用ko.utils.arrayFirst从数组中查找当前用户。我觉得我在这里没有任何意义。无论如何要制作一个表格来访问用户？如下所示：

function UserViewModel() {
        var self = this;
        self.users = ko.observableArray([]);
        self.statuses = ko.observableArray([]);
        self.currentUser = ko.utils.arrayFirst(self.users(), function (user) {
                return user.UserID() == @HttpContext.Current.Session["UserID"];
        });
}

然后在我看来制作一个表格（我正在使用 twitter-bootstrap），如下所示： 

       <form class="well form-horizontal">    
        <div class="control-group">
            <label class="control-label" for="Statuses">
                Status</label>
            <div class="controls">
                <select id="Statuses" data-bind="options: statuses, optionsValue: 'StatusID', optionsText: 'Stat', value: currentUser.StatusID">
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="InTime">
                In:</label>
            <div class="controls">
                <input id="InTime" data-bind="value: currentUser.InTime" class="span1" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="OutTime">
                Out:</label>
            <div class="controls">
                <input id="OutTime" data-bind="value: currentUser.OutTime" class="span1" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="Notes">
                Notes</label>
            <div class="controls">
                <textarea id="Notes" data-bind="value: currentUser.Notes" /></textarea>
                 <p><span style="text-align:center;"><a id="chg" class="btn btn-primary" >Update</a></span></p>
            </div>
        </div>   
       </form>

如果我没有任何意义或者您需要更多信息来帮助解决我的问题，请发表评论。谢谢！！

4

1 回答 1

4

你得到什么样的错误？在我看来，您的 currentUser 属性将在构造函数中设置，而数组看起来仍然是空的，也许您只是没有显示用户的填充位置。另一个是您只设置一次，您可以为用户 ID 创建一个 observable 并使用计算来查找匹配的用户，然后您可以在稍后或设置用户之后通过更改 ID 轻松更改用户：

self.currentUserId = ko.observable(@HttpContext.Current.Session["UserID"]);
self.currentUser = ko.computed(function() {
    return ko.utils.arrayFirst(self.users(), function (user) {
            return user.UserID() == self.currentUserId();
    });
});

当您更新数组或 currentUserId 可观察对象时，应正确设置 currentUser。如果用户是可观察的，则需要将其作为函数调用，或在表单上使用 with 绑定：

<input id="InTime" data-bind="value: currentUser().InTime" class="span1" />

<form data-bind="with: currentUser">
<input id="InTime" data-bind="value: InTime" class="span1" />
于 2012-06-12T20:24:18.623 回答