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