Ractivejs: как приступить к работе Вложенные свойства в представлении

У меня есть 2 объекта results и headers, которые headers генерируются из _.keys(result[0])

r{
  data:{
    headers:['head1','head2']
    result:[
      {head1:'content1',head2:'content2'}
      {head1:'content3',head2:'content4'}
      {head1:'content5',head2:'content6'}
    ]
}

Мне нужно создать таблицу динамически, поэтому я создаю это:

<table class="ui celled table segment">
  <thead>
    <tr>
    {{#headers}}
    <th>{{.}}</th>
    {{/headers}}
  </tr></thead>
  <tbody>
    {{#result:i}}
    <tr>
      {{#headers:h}}
        <td>{{????}}</td> <-- Here is where I fail to know what to put into
      {{/headers}}
    </tr>
    {{/result}}
  </tbody>
</table>

Может ли кто-нибудь помочь мне заполнить пробелы. Итак, я могу создать таблицу, отображающую contents

Если я удаляю часть {{#headers}} и уже знаю, что элементы <td>{{.head1}}</td> работают отлично, проблема в том, что я генерирую разные объекты на лету.


ractivejs
person alker    schedule 25.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

{{#result:i}}
  <tr>
    {{#headers:h}}
      <td>{{result[i][this]}}</td> 
    {{/headers}}
  </tr>
{{/result}}

Причина, по которой это работает, заключается в том, что <td> повторяется для каждого элемента в массиве headers, потому что он находится внутри секции headers — пока это так очевидно. Из-за этого мы можем использовать this для ссылки на текущий заголовок (head1, head2 и т. д.). Хитрость заключается в том, чтобы получить ссылку на текущую строку, а поскольку вы уже создали ссылку индекса i, мы можем легко сделать это с помощью result[i]. Отсюда result[i][this].

Вот демонстрационная скрипта: http://jsfiddle.net/rich_harris/dkQ5Z/

person Rich Harris    schedule 25.03.2014