我有一张动态桌子，上面有两个输入（邮件，名字）的coluns。 我需要将保存的数据从数据库加载到表格，并使用户可以添加新的电子邮件和名称。
当我触发按钮添加一个新的行到我的表时，我的问题出现。
我在输入中得到了跟随值：
函数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" }]}
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" }]}
最满意答案
我解决了这个问题，当我把ko.applyBindings（vm）放入DOM准备好的处理程序中时：
$(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的$函数。
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.
更多推荐
发布评论