var parentmodel = function() { var self = this; this.cols = [ {name:'id',type:'int'}, {name:'name',type:'varchar'}, {name:'desc',type:'text'} ]; this.rows = [ {id:1,name:'peter',desc:'sometext'}, {id:2,name:'jack',desc:'sometext'}, {id:3,name:'mary',desc:'sometext'} ]; this.current = ko.observable(); this.edit = function(e){ self.current(e); } } ko.components.register('form-control', { viewmodel: function(params) { // how parent current data inside component? }, template: '<input data-bind="value: text" />' }); ko.applybindings(new parentmodel()); <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <table border="1"> <thead> <tr> <th>#</th> <!--ko foreach: cols--> <th data-bind="text: name"></th> <!--/ko--> <th></th> </tr> </thead> <tbody> <!--ko foreach: rows--> <tr> <td data-bind="text: $index"></td> <!--ko foreach: $parent.cols--> <td data-bind="text:$parent[name]"></td> <!--/ko--> <td> <button data-bind="click: $parent.edit">edit</button> </td> </tr> <!--/ko--> </tbody> </table> <span data-bind="text:json.stringify(current())"></span> <form> <form-control params="data-field: 'id'"></form-control> </form> i want render fields/columns current row data depend on datatype automatically. should do? please show me way.
if form content should load ajax call, difference? thanks
try pass param form-control:
<form> <form-control params="data-field: 'id', current: current"></form-control> </form> and use in component:
ko.components.register('form-control', { viewmodel: function(params) { this.current = params.current; }, template: '<input data-bind="value: current().name" />' }); see working fiddle
Comments
Post a Comment