Question

我是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以显示表中的所有用户很简单，但我想创建一个表单，以便当前用户可以更改他的变量。我正在使用会话变量来设置UserID。然后我使用 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>

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

Answer 1

你得到什么样的错误？它看起来像你的currentUser属性将在构造函数中设置，而数组看起来仍然是空的仍然是一件事，也许你只是没有显示用户填充的位置。另一个是您只需设置一次，您可以为用户ID创建一个observable并使用computed来查找匹配的用户，然后您可以通过稍后更改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 observable时，应正确设置currentUser。如果用户是可观察的，则需要将其称为函数，或在表单上使用with binding：

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

<form data-bind="with: currentUser">
<input id="InTime" data-bind="value: InTime" class="span1" />

knockoutjs绑定到可观察数组中的单个对象

1 个答案: