knockout.js - knockout dynamic master details -
in quest of dynamic create, read,update, delete through knockoutjs
part of continuation of question fellow expert (dynamic column , rows knockoutjs)
<script type="text/javascript"> var columndefs = [{ "$id": "1", "columnname": "id", "system_type_id": 56, "primarycol": 1 }, { "$id": "2", "columnname": "inv_id", "system_type_id": 231, "primarycol": 0 }, { "$id": "3", "columnname": "acx_no", "system_type_id": 175, "primarycol": 0 }, { "$id": "4", "columnname": "acx_name", "system_type_id": 175, "primarycol": 0 }, { "$id": "5", "columnname": "s_no", "system_type_id": 175, "primarycol": 0 }, { "$id": "27", "columnname": "acc_class", "system_type_id": 231, "primarycol": 0 }, { "$id": "28", "columnname": "direction", "system_type_id": 231, "primarycol": 0 }]; var rowdefs = [{ "$id": "1", "id": 1, "inv_id": "pv0001-1", "acx_no": "6", "acx_name": "abc", "s_no": "5", "acc_class": "local", "direction": "two-way" }, { "$id": "2", "id": 2, "inv_id": "pv0002-1", "acx_no": "3", "acx_name": "ckd", "s_no": "6", "acc_class": "local", "direction": "two-way" }]; function headerviewmodel(data, parent) { var self = this, nbsp = string.fromcharcode(160); // observables ko.mapping.fromjs(data, {}, self); //self.isvisible = ko.observable(true); // computeds self.isvisible = ko.computed(function () { //console.log('data.columnname.indexof(\'sys\'):', data.columnname.indexof('sys')); return data.columnname.indexof('sys') >= 0 ? false : true; }); self.headername = ko.computed(function () { return data.columnname.replace('_', nbsp); }); self.systemfield = ko.computed(function () { return data.columnname.indexof('sys'); }); self.visible = ko.computed(function () { //console.log('data.columnname.indexof(\'sys\'):', data.columnname.indexof('sys')); return data.columnname.indexof('sys') >= 0 ? false : true; }); } // --------------------------------------------------------------------------- function rowviewmodel(data, parent) { var self = this, nbsp = string.fromcharcode(160); // observables ko.mapping.fromjs(data, {}, self); // computeds self.hrefdetailspage = ko.computed(function () { return parent.invtype + '/' + data.id; }); self.selecteditem = ko.observable(); self.setselecteditem = function () { console.dir(this); self.selecteditem(this); }; self.getdetails = function (details) { self.selecteditem(details); //console.dir(self.selecteditem); return details; // self.selecteditem(); } } // --------------------------------------------------------------------------- function viewmodel() { var self = this; // raw values self.invtype = "@viewbag.invtype"; //"pavement"; // observables self.columns = ko.observablearray(); self.rows = ko.observablearray(); // computeds self.visiblecolumns = ko.computed(function () { return ko.utils.arrayfilter(self.columns(), function (column) { return column.isvisible; }); }); // methods self.load = function () { $.when( // use 2 plain $.get() calls api resources here // $.post() required mock-up in jsfiddle $.post("/echo/json/", { json: json.stringify(columndefs) }), $.post("/echo/json/", { json: json.stringify(rowdefs) })) .then(function (columnresponse, rowresponse) { var columndefs = columnresponse[0], rowdefs = rowresponse[0], columnmapping = { key: function (data) { return ko.utils.unwrapobservable(data.columnname); }, create: function (options) { return new headerviewmodel(options.data, self); } }, rowmapping = { key: function (data) { return ko.utils.unwrapobservable(data.id); }, create: function (options) { return new rowviewmodel(options.data, self); } }; ko.mapping.fromjs(columndefs, columnmapping, self.columns); ko.mapping.fromjs(rowdefs, rowmapping, self.rows); }); return self; }; } // --------------------------------------------------------------------------- ko.applybindings(new viewmodel().load()); </script> //html - ui
<div class="details" data-bind="visible:rows.selecteditem"> <div data-bind="with: rows.selecteditem"> details data....... <pre data-bind="text: json.stringify(ko.tojson($data))"></pre> <input data-bind="value:id" /> <!-- todo dynamicly output label , data viewmodel --> <b>id:</b> <span data-bind="text: id"></span> <b>acx name:</b> <span data-bind="text:acx_name"></span> <b>inv id:</b> <span data-bind="text:acx_name"></span> </div> </div> <div data-bind="visible: rows.selecteditem == null"> no selection made </div> <div id="listplaceholder"> <table> <thead> <tr> <th>link</th> <!-- ko foreach: $root.visiblecolumns --> <th data-bind="text: headername, visible: visible"></th> <!-- /ko --> </tr> </thead> <tbody data-bind="foreach: $root.rows"> <tr data-bind="click: $data.setselecteditem"> <td><a href="" data-bind="attr: {href: hrefdetailspage}">details</a></td> <!-- ko foreach: $root.visiblecolumns --> <td data-bind="text: $parent[columnname()], visible: visible"></td> <!-- /ko --> </tr> </tbody> </table> </div> with above code seing data @ self.setselecteditem = function () { console.dir(this); self.selecteditem(this); };
i output data in details @ section
sandbox : (http://jsfiddle.net/sigibb/tq55u/)
the selecteditem property misplaced move viewmodel class. if click on row details shown top.
function viewmodel() { var self = this; self.selecteditem = ko.observable(null); } <div data-bind="with: selecteditem">test <pre data-bind="text: json.stringify(ko.tojson($data))"></pre> <input data-bind="value:id" /> <b>id:</b> <span data-bind="text: id"></span> </div> edit:
sorry sigagan. when saw detail div top of html.i thought want 1 detail rows. updated fiddle in order have master , detais view.
i hope helps.
Comments
Post a Comment