简体   繁体   中英

Issue when push array to observableArray

I got a dynamic table that have tow coluns with inputs (mail, name). I need to load saved values from database to the table and make possible to user add new e-mails and names.

My problem appers when i trigger the button to add a new row to my table.

i got the follow value into the input:

function d(){if(0

error

This is my html code

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

And this is the data json:

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

}

I solved it when i put ko.applyBindings(vm) in a DOM-ready handler:

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

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

Explanation: we have to wait for the DOM loaded with the ko.applyBindings call.

From the KO.js documentation:

To activate Knockout, add the following line to a block:

ko.applyBindings(myViewModel);

You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM