将数组推送到 observableArray 时的问题答案

【问题标题】：Issue when push array to observableArray将数组推送到 observableArray 时的问题
【发布时间】：2017-07-01 13:52:04
【问题描述】：

我有一个动态表，其中有两个列和输入（邮件、姓名）。我需要将保存的值从数据库加载到表中，并使用户可以添加新的电子邮件和名称。

当我触发按钮向我的表中添加新行时，我的问题出现了。

我在输入中得到了以下值：

函数 d(){if(0

error

这是我的html代码

            <table class="table" data-bind="visible: emails().length">
                          <thead>
                              <tr>
                                  <th>Email</th>
                                  <th>Nome</th>
                                  <th></th>
                              </tr>
                          </thead>
                          <tbody data-bind="foreach: emails">
                              <tr>
                                  <td>
                                      <input type="text" name="contatoMail" data-bind="value: contatoMail" />
                                  </td>
                                  <td>
                                      <input type="text" name="contatoNome" data-bind="value: contatoNome" />
                                  </td>
                                  <td>
                                      <button type="button" class="btn btn-link" data-bind="click: $parent.remover">Remover</button>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
            <div class="control-group">
                <label class="control-label" for="#"></label>
                <div class="controls">
                      <button type="button" class="btn btn-primary" data-bind="click: adicionar">
                        Adicionar E-mail
                      </button>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="#"></label>
                <div class="controls">
                      <button type="button" class="btn btn-primary" data-bind="disable: possuiItem">
                        Enviar e-mail(s)
                      </button>
                </div>
            </div>

Javascript：

function Projeto(opt_data) {
    var data        = opt_data || {};
    var self        = this;
    self.idProjeto  = ko.observable(data.idProjeto);
    self.possuiItem = ko.observable(true);
    self.emails     = ko.observableArray([]);

    for (var i = 0; i < data.emails.length; i++) {
        var email = new Email(data.emails[i]);
        self.emails.push(email);
        self.possuiItem(false);
    }

    self.adicionar = function () {
        var email = new Email();
        self.emails.push(email);
        self.possuiItem(false);
    };

    self.remover = function (email) {
        self.emails.remove(email);
        if (self.emails().length == 0) {
            self.possuiItem(true);
        }
    };
}

function Email(opt_data) {
    var data = opt_data || {};
    console.log(data);
    var self = this;
    self.contatoMail = ko.observable(data.contatoMail || "");
    self.contatoNome = ko.observable(data.contatoNome || "");
}

var data = $.parseJSON($('#model').html());
var vm = new Projeto(data);
ko.applyBindings(vm);

这是数据json：

{
"idProjeto": 1333,
"emails": [{
    "idProjeto": 1333,
    "idModelo": 1,
    "contatoMail": "caique.romero@sou.com.br",
    "contatoNome": "Caique Romero"
}]

}

【问题讨论】：

我没有发现任何错误。检查这个jsfiddle

标签： javascript html arrays knockout.js

【解决方案1】：

当我将 ko.applyBindings(vm) 放入 DOM-ready 处理程序时，我解决了这个问题：

$(document).ready(function () { 
    function Projeto(opt_data) {...}
    function Email(opt_data) {...}

    var data = $.parseJSON($('#model').html());
    var vm = new Projeto(data);
    ko.applyBindings(vm);
});

说明：我们必须等待通过 ko.applyBindings 调用加载的 DOM。

来自 KO.js 文档：

要激活淘汰赛，将以下行添加到块中：

ko.applyBindings(myViewModel);

您可以将脚本块放在 HTML 的底部文档，或者您可以将其放在顶部并将内容包装在 DOM 就绪的处理程序，例如 jQuery 的 $ 函数。

【讨论】：