Question

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

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

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

function d（）{if（0

这是我的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"
}]

}

Answer 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文档：

要激活Knockout，请将以下行添加到块中：

ko.applyBindings（myViewModel）;

您可以将脚本块放在HTML的底部   文档，或者您可以将它放在顶部并将内容包装在一个   支持DOM的处理程序，例如jQuery的$ function。

将数组推送到observableArray时出现问题

1 个答案: