Question

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

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>

然后我又有两个视图可以处理每个视图：

class App.Views.ViewExtractFoo extends Backbone.View

  tagName: "li"
  template: JST['backbone/templates/foo']

  render: ->
    $(@el).html(@template(content: @model))
    this


class App.Views.ViewExtractBar extends Backbone.View

  tagName: "li"
  template: JST['backbone/templates/bar']

  render: ->
    $(@el).html(@template(content: @model))
    this

模板看起来像这样（交换foo为bar为bar示例）：

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

现在这个有效，而且效果很好。但它感觉非常混乱。我在rails中使用骨干，所以有6个或更多不同的文件只需要一个JSON请求并呈现它。这感觉很讨厌，有更好的方法。我只是不确定它是哪一个。

我只是在想如果我在Rails中做到这一点，我可以有一个可以全力以赴的视图！？

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

有点困在这里，我并不擅长这个，所以任何帮助都会受到极大的欢迎。

Answer 1

简化和统一模板和视图是一种选择。模板可以使用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

在Backbone中渲染集合

1 个答案: