CODEWITHSUNDEEP
knockout.js
user1891282
user1891282

Reputation: 11

Passing dynamic variable to bind-data

I have a problem with nested foreach when using knockout.js. Below is description

MyViewModel(){
   filteredRecords();
   columns();
}

RecordModel(){
   A,
   B,
   C
}

ColumnModel{
   Visible,
   ColumnName
}

Requirement is, if column.Visible == 1, let show the corresponding ColumnName in ReportModel. In the data-bind="value: records.column.Column_Name(), I try to get the correct path but not sucessful yet, please give me some advices , thanks a lot.

<div>
<!-- ko foreach: {data: filteredRecords(), as: 'records'}  -->
   <ul class="tableBody">
      <li class="firstLevel">
          <ul>
              <li class="col col01"># : <span data-bind="text: records.ID"></span></li>                            
                 <!-- ko foreach: {data: $parent.columns(), as: 'column'} -->
                     <!-- ko if: column.Visible() == 1 -->

                          <li class="col col0"><input class="input0" **data-bind="value: records.column.Column_Name()"** /></li>  

                  <!-- /ko -->
                 <!-- /ko -->              
           </ul>
       </li>
    </ul>
<!-- /ko --> 
</div>     enter code here

Upvotes: 1

Views: 1766

Answers (1)

Markus Jarderot
Markus Jarderot

Reputation: 89171

<ul data-bind="foreach: { data: filteredRecords, as: 'record' }">
    <li><strong>#</strong> : <span data-bind="text: ID"></span>
        <ul data-bind="foreach: { data: $root.columns, as: 'column' }">
            <!-- ko if: column.Visible -->
            <li>
                <strong data-bind="text: column.ColumnName"></strong>:
                <span data-bind="text: record[column.ColumnName()]"></span>
            </li>
            <!-- /ko -->
        </ul>
    </li>
</ul>​

You could swap the inner <ul> for a <!-- ko -->, if you wish.

http://jsfiddle.net/MizardX/K7Lzs/

Upvotes: 3

Related Questions