Javascript 将一个新的内部对象插入到可观察对象数组中，并更新DOM_Javascript_Html_Knockout.js

Javascript 将一个新的内部对象插入到可观察对象数组中，并更新DOM

javascript html knockout.js

Javascript 将一个新的内部对象插入到可观察对象数组中，并更新DOM,javascript,html,knockout.js,Javascript,Html,Knockout.js,带绑定的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>

带绑定的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>

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填充上述会议之后，

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
   }
]

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

试试以下方法：

var obj = [  
   {  
      "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
   }
];


/* Iterate all conferences */
for (var i in obj) {

  /* Find conference with ID = 8 */
  if (obj[i].Id === 8) {

    /* Add a new user to the conference */
    obj[i].ConferenceUsers.push({

      "Id":1111,
      "ConferenceId":1,
      "Name":null,
      "Email":"test@example.com",
      "UserName":null,
      "PhoneNumber":null,
      "ChannelId":null,
      "State":null,
      "Type":null,
      "RecordingId":null

    });

    break;
  }
}

console.log(obj); // output result

试试这个：

var obj = [  
   {  
      "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
   }
];


/* Iterate all conferences */
for (var i in obj) {

  /* Find conference with ID = 8 */
  if (obj[i].Id === 8) {

    /* Add a new user to the conference */
    obj[i].ConferenceUsers.push({

      "Id":1111,
      "ConferenceId":1,
      "Name":null,
      "Email":"test@example.com",
      "UserName":null,
      "PhoneNumber":null,
      "ChannelId":null,
      "State":null,
      "Type":null,
      "RecordingId":null

    });

    break;
  }
}

console.log(obj); // output result

您需要执行四个步骤：

从可观察数组中获取当前会议列表

conferences

找到具有正确id的会议

将新用户推送到本次会议的

ConferenceUsers

确保使用新数据设置了

Conferences

虽然所有步骤都很容易执行，但它们的工作方式会有一些缺点：

会议

对象和

会议用户

数组不可见。Knockout不会自动意识到

会议

对象内部的任何更改。因此，在第3步和第4步之后，对于knockout，它看起来不会有任何变化：

Conferences

数组中仍然有相同的对象

我的建议：

<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>

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
}

如果定期向会议添加新用户，我建议创建一个

Conference

viewmodel，其中包含

ko.observearray

。或者，您可以为每个微小的更改创建新的

Conference

对象，这将触发knockout以重新呈现整个UI，而不仅仅是相关部分（假设您在某处使用了

foreach

数据绑定）

关于如何将常规

会议

对象映射到viewmodels的快速示例：

//来自ajax请求的JSON数据（对象数组）
var conferencesData=[]；
var会议=功能（conferenceJSON）{
//最好单独映射您正在使用的所有属性，
//但这至少暴露了原始JSON对象
this.props=conferenceJSON；
this.users=ko.observearray（conferenceJSON.conferenceUsers）；
};
var createConference=函数（conferenceJSON）{
返回新会议（conferenceJSON）；
};
var ConferenceList=函数（conferencesJSON）{
var self=这个；
this.conferences=ko.observearray（conferencesJSON.map（createConference））；
this.addConference=函数（conferenceJSON）{
self.conferences.push（createConference（conferenceJSON））；
};
this.addUserToConference=函数（userJSON）{
var conferences=self.conferences（）；
对于（var c=0；c<0.length；c+=1）{
//步骤2：查找具有所需id的会议
if（会议[c].props.id==用户JSON.ConferenceId）{
//第三步：我们正在推进一个可观察的轨道，所以没有必要
//担心第四步。
会议[c].users.push（userJSON）；
返回true；
}
}
返回false；
};
};
ko.应用绑定（新会议列表（会议数据））您需要执行四个步骤：
从可观察数组中获取当前会议列表conferences
找到具有正确id的会议
将新用户推送到本次会议的ConferenceUsers
确保使用新数据设置了Conferences
虽然所有步骤都很容易执行，但它们的工作方式会有一些缺点：
会议
对象和会议用户
数组不可见。Knockout不会自动意识到会议
对象内部的任何更改。因此，在第3步和第4步之后，对于knockout，它看起来不会有任何变化：Conferences
数组中仍然有相同的对象
我的建议：
<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>

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
}

如果定期向会议添加新用户，我建议创建一个Conference
viewmodel，其中包含ko.observearray
。或者，您可以为每个微小的更改创建新的Conference
对象，这将触发knockout以重新呈现整个UI，而不仅仅是相关部分（假设您在某处使用了foreach
数据绑定）
关于如何将常规会议
对象映射到viewmodels的快速示例：

//来自ajax请求的JSON数据（对象数组）
var conferencesData=[]；
var会议=功能（conferenceJSON）{
//最好单独映射您正在使用的所有属性，
//但这至少暴露了原始JSON对象
this.props=conferenceJSON；
this.users=ko.observearray（conferenceJSON.conferenceUsers）；
};
var createConference=函数（conferenceJSON）{
返回新会议（conferenceJSON）；
};
var ConferenceList=函数（conferencesJSON）{
var self=这个；
this.conferences=ko.observearray（conferencesJSON.map（createConference））；
this.addConference=函数（conferenceJSON）{
self.conferences.push（createConference（conferenceJSON））；
};
this.addUserToConference=函数（userJSON）{
var conferences=self.conferences（）；
对于（var c=0；c<0.length；c+=1）{
//步骤2：查找具有所需id的会议
if（会议[c].props.id==用户JSON.ConferenceId）{
//第三步：我们正在推进一个可观察的轨道，所以没有必要
//担心第四步。
会议[c].users.push（userJSON）；
返回true；
}
}
返回false；
};
};
ko.应用绑定（新会议列表（会议数据））似乎无法理解每件事应该如何工作。。。我已经用剩下的细节更新了我的帖子。你能更新你的帖子吗？你仍然需要添加一个observearray
来存储用户。我在这里举了一个有效的例子：你需要的最重要的东西