i have jquery modal dialog inside pass data knockout viewmodel. dialog works fine - however, below code broken.
ideally, able click on uri triggers modal dialog, , have dialog load data knockout viewmodel. appreciated.
markup:
<a href="#" id="listnames">list names</a> <div id="listnames" data-bind="datamodel: { autoopen: false, modal: true }"> <div> <form action=''> <p>you have added <span data-bind='text: name().length'> </span> person(s)</p> <table data-bind='visible: name().length > 0'> <thead> <tr><th>select</th> <th>name</th> <th>age</th> <th /> </tr> </thead> <tbody data-bind='foreach: metrics'> <tr> <td><input type="checkbox" /></td> <td><span data-bind='text: name' > </span></td> <td><span data-bind='text: age'> </span></td> </tr> </tbody> </table> </form> </div> </div> viewmodel:
var datamodel = function (edata) { var self = this; self.edata = ko.observablearray(edata); self.addname = function () { self.edata.push({ name: "", age: "" }); }; self.removename = function (name) { self.edata.remove(name); }; self.save = function (form) { alert("could transmit server: " + ko.utils.stringifyjson(self.edata)); // transmit server regular form post, write this: // ko.utils.postjson($("form")[0], self.edata); }; }; var viewmodel = new datamodel([ { name: "jack", age: "41" }, { name: "jill", age: "33" } ]); ko.applybindings(new viewmodel); jquery dialog:
$("#listnames, ").dialog({ autoopen: false, width: 300, modal: true, buttons: { "ok": function () { $(this).dialog("destroy"); }, cancel: function () { $(this).dialog("close"); } } }); $("#openlist") .click(function () { $("#listnames").dialog("open"); });
there few errors in code posted. have working version here : http://jsfiddle.net/ufgz8/1/
here html :
<a href="#" data-bind="click: $root.opendialog"> open dialog </a> //you had 2 elements same id, removed id on link , bound method in view model <div id="listnames"> <div> <form action=''> <p>you have added <span data-bind='text: name.length'> </span> person(s)</p> // name item not observable, cannot use name().length <table data-bind='visible: name.length > 0'> // same remark name <thead> <tr> <th>select</th> <th>name</th> <th>age</th> <th /> </tr> </thead> <tbody data-bind='foreach: edata'> <tr> <td> <input type="checkbox" /> </td> <td><span data-bind='text: name'> </span> </td> <td><span data-bind='text: age'> </span> </td> </tr> </tbody> </table> </form> </div> </div> the js:
$("#listnames").dialog({ autoopen: false, width: 300, modal: true, buttons: { "ok": function () { // $(this).dialog("close"); // replaced destroy close, can opened after ok has been clicked }, cancel: function () { $(this).dialog("close"); } } }); var datamodel = function (edata) { var self = this; self.edata = ko.observablearray(edata); self.addname = function () { self.edata.push({ name: "", age: "" }); }; self.opendialog = function () { $("#listnames").dialog("open"); }; self.removename = function (name) { self.edata.remove(name); }; self.save = function (form) { alert("could transmit server: " + ko.utils.stringifyjson(self.edata)); // transmit server regular form post, write this: ko.utils.postjson($("form")[0], self.edata); }; }; var viewmodel = new datamodel([{ name: "jack", age: "41" }, { name: "jill", age: "33" }]); ko.applybindings(viewmodel); // have created variable viewmodel data, bound ko new object of type viewmodel, must either call ko viewmodel created, or inline creation of new "datamodel" edit : added comments changes
edit 2 : updated link jsfiddle correct version ;)
Comments
Post a Comment