knockout.js - How to acces to parent data in child component -


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