javascript - 编辑对象数组中新添加的项目并更新 DOM

Question

这是JSFiddle .

对象数组如下所示:

var data = [{
  "ConferenceUsers": [{
    "Id": 3006,
    "ConferenceId": 8,
    "Name": null,
    "Email": "mail@lala.com",
    "UserName": null,
    "PhoneNumber": "234234234234"
  }],
  "Id": 8,
  "Subject": "YYYhaaaaa",
  "StartTime": "2016-05-29T18:30:00",
  "EndTime": "2016-05-29T19:30:00",
  "OrganizerEmail": "elpas@live.com",
  "OrganizerName": "dasdasd",
}, {
  "ConferenceUsers": [{
    "Id": 3013,
    "ConferenceId": 12,
    "Name": null,
    "Email": "dsfdfsdfdsf@dfdfdf.com",
    "UserName": null,
    "PhoneNumber": null
  }],
  "Id": 12,
  "Subject": "dsfsdfdsfsdf",
  "StartTime": "2016-05-31T22:00:00",
  "EndTime": "2016-05-31T23:00:00",
  "OrganizerEmail": "d@adssad.com",
  "OrganizerName": "dsfdsfsdf"
}];

我需要能够添加和编辑新的 ConferenceUsers。

添加新用户可以，但我无法编辑它们。

session 用户 View 模型:

var ConferenceUser = function (user) {
    this.ConferenceId = ko.observable(user.ConferenceId);
    this.Email = ko.observable(user.Email);
    this.Id = ko.observable(user.Id);
    this.Name = ko.observable(user.Name);
    this.PhoneNumber = ko.observable(user.PhoneNumber);
}; 

ConferenceList ViewModel 和映射:

var createConferenceUser = function (user) {
    return new ConferenceUser(user);
};

var ConferenceList = function(conferencesJSON) {
  var self = this;

  var users = [];
  for (i = 0; i < conferencesJSON.length; i++) {
      users.push(conferencesJSON[i].ConferenceUsers);
  }

  this.conferences = ko.observableArray(conferencesJSON.map(createConference));
  this.conferenceUsers = ko.observableArray(users.map(createConferenceUser));

  this.addConference = function(conferenceJSON) {
    self.conferences.push(createConference(conferenceJSON));
  };
};

ko.applyBindings(new ConferenceList(data));

问:如何更新现有/新添加的 ConferenceUsers 和 DOM，如 jsFiddle 中所示？

Answer 1

就像我评论的那样:如果您要实际使用具有可观察属性的 ConferenceUser View 模型，您可能能够弄清楚如何创建新的，以及编辑现有用户。不过，我确实看到了其他一些改进点，所以我认为仍然值得为您的问题制定答案:

• 编辑/保存/取消逻辑使您的 Conference View 模型变得困惑，并且可以轻松地分成自己的小部件
• 您在添加和更新按钮用户界面之间切换的方式不适用于 knockout

我写了一个更多关于架构的答案，因为我觉得你的问题的答案自然是从明确定义的关注点分离中得出的。因为我喜欢重构:)

这是我在移动内容后的建议。您可以自己决定使用多少，但至少可以在代码中找到问题的答案!

session 列表

仅用于管理 session 列表。可以使用 removeConference 或 getConferencesFromServer 等轻松扩展。

var ConferenceList = function(conferencesJSON) {
  this.conferences = ko.observableArray(conferencesJSON.map(Conference.create));

  this.addConference = function(conferenceJSON) {
    self.conferences.push(Conference.create(conferenceJSON));
  };
};

session

保存 ConferenceUser 实例的列表以及用于编辑和创建新用户的小部件。 这是您问题的答案:

var Conference = function(conferenceJSON) {
  var self = this;
  this.Id = conferenceJSON.Id;

  // Note that we're mapping the plain objects from the json to
  // ConferenceUser instances!
  this.users = ko.observableArray(
    conferenceJSON.ConferenceUsers.map(ConferenceUser.create));

  this.userEditor = new UserEditor(this.users, this.Id);

  this.onUserClick = function(user, event) {
    self.userEditor.edit(user);
  };
};

session 用户

这是我们确保 UI 在编辑后更新的地方:请注意，Email 和 PhoneNumber 属性是可观察的。我没有为所有属性创建可观察量，以表明并非所有属性都应该在 UI 中更改。

var ConferenceUser = function(user) {
  this.Email = ko.observable(user.Email);
  this.PhoneNumber = ko.observable(user.PhoneNumber);

  this.ConferenceId = user.ConferenceId;
  this.Id = user.Id;
  this.Name = user.Name;
};

我创建静态创建方法有两个原因:

1. 它会跟踪闭包内的 id 以确保它是唯一的
2. 它很容易在 Array.prototype.map 方法中使用。

代码:

ConferenceUser.create = (function() {
  var id = 0;

  return function(userOptions) {
    // Add an ID if not present in options
    return new ConferenceUser(Object.assign(userOptions, {
      Id: userOptions.Id || id++
    }));
  };
}());

用户编辑器

这是对您的代码最大的改进(我相信):一个编辑器小部件可以帮助您创建、编辑和保存新用户。它公开的方法更容易理解和编写，因为它们不在您的 Conference View 模型内。

var UserEditor = function(users, conferenceId) {
  var self = this;

  // Holds the user that's being edited, is null when
  // creating a new user
  this.editing = ko.observable(null);

  this.phoneInput = ko.observable("");
  this.emailInput = ko.observable("");

  this.clear = function() {
    self.phoneInput("");
    self.emailInput("");
  };

  this.add = function() {
    var newUserOptions = {
      Email: self.emailInput(),
      PhoneNumber: self.phoneInput(),
      ConferenceId: conferenceId
    };
    users.push(ConferenceUser.create(newUserOptions));
    self.clear();
  };

  this.edit = function(user) {
    self.editing(user);

    self.phoneInput(user.PhoneNumber());
    self.emailInput(user.Email());
  };

  this.reset = function() {
    self.editing(null);
    self.clear();
  };

  this.save = function() {
    var currentUser = self.editing();

    currentUser.Email(self.emailInput());
    currentUser.PhoneNumber(self.phoneInput());

    self.reset();
  };

};

现在，完成所有这些代码后，您将看到 HTML 非常简单。这是您的编辑小部件:

<div data-bind="with: userEditor">
  <input type="tel" placeholder="phone number" 
    data-bind="value: phoneInput" />
  <input type="email " placeholder="email" 
    data-bind="value: emailInput" />
  <!-- ko ifnot: editing -->
  <button data-bind="click: add">Add</button>
  <!-- /ko -->
  <!-- ko if: editing -->
  <button data-bind="click: save">Save</button>
  <button data-bind="click: reset">Cancel</button>
  <!-- /ko -->
</div>

要解决这个问题有点长，但如果你已经做到了这一点:这里有一个更新的 fiddle ! https://jsfiddle.net/e2ox4doj/