javascript - 将新的内部对象插入到可观察对象数组中并更新 DOM

Question

带有绑定(bind)的 HTML:

<div class="container" data-bind="foreach: { data: Conferences, as: 'conf' }">
    <div class="conf" data-bind="attr: { id : conf.Id }">
        <div class="conf-month" data-bind="text: conf.StartTime"></div>
        <div class="conf-day" data-bind="text: conf.EndTime"></div>
        <div class="add-user">
            <input type="tel" data-bind="value: $root.PhoneNumber />
            <input type="email" data-bind="value: $root.Email" />
            <a id="add-user" title="Add new user" data-bind="attr: { value: conf.Id }, click: $root.addUserToConference">Add</a>
        </div>
        <div class="conf-users" data-bind="foreach: { data: conf.ConferenceUsers, as: 'user' }">
            <div class="conf-user" data-bind="attr: { id: 'confuser-' + user.Id}">
                <span data-bind="text: user.Name"></span>
                <span data-bind="text: user.PhoneNumber"></span>
                <span data-bind="text: user.Email"></span>
            </div>
        </div>
    </div>
</div>

KnockoutJs ViewModel:

function ConferenceViewModel() {
    var self = this;

    self.Conferences = ko.observableArray([]);
    self.PhoneNumber = ko.observable("");
    self.Email = ko.observable("");


self.getAllConfs = function () {
        $.ajax({
            type: 'GET',
            url: '/confs/getconfs',
        }).done(function (confs) {
            $.each(confs, function (index, conf) {
                    //populate the list on document ready
                    confVm.Conferences.push(conf);
            };
        }).fail(showError);
}

self.addUserToConference  = function (viewModel, event) {
    var user = {
        "Id": 0,
        "ConferenceId": viewModel.Id(),
        "Email": "self.Email()",
        "PhoneNumber": self.PhoneNumber(),
    };  

    // here we should insert a new ConferenceUser into the Conferences observable array
    // and also update the DOM 

    // ajax to insert user to db
}

在我通过ajax填充上述 session observableArray之后， console.log(ko.toJSON(confVm.Conferences())) 的输出如下:

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

问:如何通过 ConferenceId 插入新的 ConferenceUser 并相应更新 DOM？

Answer 1

您需要执行四个步骤:

1. 从可观察数组Conferences获取当前 session 列表
2. 查找具有正确 ID 的 session
3. 将新用户推送到此 session 的 ConferenceUsers
4. 确保使用新数据设置 session

虽然所有步骤执行起来都非常简单，但它们的工作方式会存在一些缺点:

Conference 对象和 ConferenceUsers 数组不可观察。 Knockout 不会自动感知 Conference 对象内部的任何更改。因此，在第 3 步和第 4 步之后，为了进行 knockout ，不会出现任何更改:Conferences 数组中仍然包含相同的对象。

我的建议:

如果向 session 添加新用户是定期发生的事情，我建议创建一个包含 ko.observableArray 用户的 Conference View 模型。或者，您可以为每个细微更改创建新 Conference 对象，这将触发 knockout 以重新渲染整个 UI 而不仅仅是相关部分(假设您已使用foreach 数据绑定(bind)某处)。

如何将常规 Conference 对象映射到 View 模型的快速示例:

// Your JSON data from the ajax request (an array of objects)
var conferencesData = [];


var Conference = function(conferenceJSON) {

  // It's better to map all properties you're using individually, 
  // but this at least exposes the original JSON object
  this.props = conferenceJSON;

  this.users = ko.observableArray(conferenceJSON.conferenceUsers);

};

var createConference = function(conferenceJSON) {
  return new Conference(conferenceJSON);
};

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

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

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

  this.addUserToConference = function(userJSON) {
    var conferences = self.conferences();

    for (var c = 0; c < conferences.length; c += 1) {
      // Step 2: Find the conference with the required id
      if (conferences[c].props.id === userJSON.ConferenceId) {
        // Step 3: We're pushing to an observableArray, so no need
        // to worry about Step 4.
        conferences[c].users.push(userJSON);
        return true;
      }
    }

    return false;
  };

};

ko.applyBindings(new ConferenceList(conferencesData));