Backbone.js 在主干中呈现集合

我有一个模型，看起来像这样

collection=
{
foo:[ [1,1], [2,2], [3,3] ] 
bar: [ [1,1], [2,2], [3,3] ] 
}

通过执行以下操作，我将在主干中呈现此视图：

template: JST["backbone/templates/first"]
collection.each (data) ->
      foo = data.attributes.foo
      bar = data.attributes.bar
      for foos in foo
        view = new Traveltime.Views.ViewExtractTimeList(model: foos)
        $('ul.listcontainer').append(view.render().el)
      for bars in bar
        console.log perce
        view = new Traveltime.Views.ViewExtractPercentList(model: bars)
        $('ul.2ndlistcontainer').append(view.render().el)

模板优先：

<ul class="listcontainer">
</ul>

<ul class="2ndlistcontainer">
</ul>

模板如下所示（例如，将foo替换为bar）：

傅：

现在，这是可行的，而且效果很好。但感觉真的很乱。我在rails中使用主干，所以有6个或更多不同的文件只需接受JSON请求并呈现它。感觉很恶心，还有更好的方法。我只是不知道是哪一个

我只是在想，如果我在Rails中这样做，我可能会有一个视图，可以把这一切都拉出来

我可以使用collection.each并以某种方式将嵌套集合传递给模板吗

---

这里有点卡住了，我一点也不擅长这一点，所以我会得到很多帮助。

简化和统一模板和视图是一种选择。模板可以使用json对象，因此它们可以呈现数组，这非常适合呈现列表，就像您的例子一样。例如，可以只有一个ListView使用单个模板对任何列表进行实际渲染，然后在主视图中对集合对象的两个属性重用此视图。希望下一个示例能让您了解简化的位置和方式

class ListView extends Backbone.View 
   tagName: 'ul'
   template: """
        {{#items}}
           <li>{{content}}</li>
        {{/items}}
    """
   render: ->
       @$el.html @template items: @options.items
       @

class MainView extends Backbone.View

    render: ->
        @$el.empty()
        for own subitems of @options.items
            @$el.append new ListView items: subitems
        @



# Example usage #
collection = 
    foo: [[1,1], [2,2], [3,3]] 
    bar: [[1,1], [2,2], [3,3]] 

$('body').append new MainView(items: collection).render().$el

class ListView扩展了主干
标记名：“ul”
模板：“”
{{{#项目}
{{content}}
{{/items}
"""
渲染：->
@$el.html@template items:@options.items
@
类MainView扩展了主干
渲染：->
@$el.empty（）
对于@options.items的自有子项
@$el.append新列表视图项：子项
@
#示例用法#
集合=
foo:[[1,1]，[2,2]，[3,3]]
酒吧：[[1,1]，[2,2]，[3,3]]
$（'body'）。追加新的主视图（项：集合）。render（）。$el

有什么需要我帮忙的吗？对我来说，这似乎是一个漫长的过程

<li>
Foo: <%=content.attributes.foo%>
</li>   

class ListView extends Backbone.View 
   tagName: 'ul'
   template: """
        {{#items}}
           <li>{{content}}</li>
        {{/items}}
    """
   render: ->
       @$el.html @template items: @options.items
       @

class MainView extends Backbone.View

    render: ->
        @$el.empty()
        for own subitems of @options.items
            @$el.append new ListView items: subitems
        @



# Example usage #
collection = 
    foo: [[1,1], [2,2], [3,3]] 
    bar: [[1,1], [2,2], [3,3]] 

$('body').append new MainView(items: collection).render().$el