Задача рендеринга коллекции магистралей с использованием шаблона усов - PullRequest
Новая
       33

Задача рендеринга коллекции магистралей с использованием шаблона усов

6 голосов
/ 27 сентября 2011

Я совсем новичок в костяке js и усов. Я пытаюсь загрузить базовую коллекцию (массив объектов) при загрузке страницы из объекта json rails, чтобы сохранить дополнительный вызов. У меня проблемы с рендерингом коллекции позвоночника с использованием шаблона усов.

Моя модель и коллекция 

var Item =  Backbone.Model.extend({

});

App.Collections.Items= Backbone.Collection.extend({
    model: Item,
    url: '/items'
});

и просмотр 

App.Views.Index = Backbone.View.extend({
    el : '#itemList',
    initialize: function() {
        this.render();
    },

    render: function() {
        $(this.el).html(Mustache.to_html(JST.item_template(),this.collection ));
        //var test = {name:"test",price:100};
        //$(this.el).html(Mustache.to_html(JST.item_template(),test ));
    }
});

В приведенном выше представлении визуализации я могу отображать одну модель (закомментированный объект теста), но не коллекции. Я полностью поражен здесь, я пробовал с обоими подчеркиваниями и усами, но не повезло.

А это и есть Шаблон 

<li>
<div>
  <div style="float: left; width: 70px">
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/60x60" alt="">
    </a>
  </div>
  <div style="float: right; width: 292px">
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4>
  </div>
  </div>
</li>

и мой массив объектов выглядит примерно так

enter image description here

Ответы [ 4 ]

7 голосов
/ 03 мая 2012

Усы могут обрабатывать массивы, используя {{#.}}{{.}}{{/.}}

7 голосов
/ 28 сентября 2011

Наконец получается, что усы не обрабатывают массив объектов, отправляемых в шаблон, поэтому мне пришлось обернуть его другим объектом, подобным этому 

render: function() {
    var item_wrapper = {
          items : this.collection
    }

    $(this.el).html(Mustache.to_html(JST.item_template(),item_wrapper ));

}

, а в шаблоне просто зациклил массив items насделать HTML 

{{#items}}
<li>
<div>
  <div style="float: left; width: 70px">
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/60x60" alt="">
    </a>
  </div>
  <div style="float: right; width: 292px">
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4>
  </div>
  </div>
</li>
{{/items}}

Надеюсь, это кому-нибудь поможет.

4 голосов
/ 26 апреля 2012

Это происходит потому, что усы ожидают, что пара ключ / значение - значение массив - для непустых списков.На странице руководства усы , раздел «Непустые списки»: 

Template:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}

Hash:

{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" },
  ]
}

Output:

<b>resque</b>
<b>hub</b>
<b>rip</b>

Если вы передаете только массив, усы не могут узнать, где его развернуть внутришаблон.

1 голос
/ 27 июня 2013

Использование Hogan.js реализация.

Данный шаблон: 

<ul>
{{#produce}}
    <li>{{.}}</li>
{{/produce}}
</ul>

И контекст: 

var context = { produce: [ 'Apple', 'Banana', 'Orange' ] );

Получаем: 

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>
...