1

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

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>

然后我有另外 2 个视图，每个视图处理一个单独的 tempate：

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 并以某种方式将嵌套集合传递给模板吗？

有点卡在这里，我绝不擅长这个，所以任何帮助都会得到很大的帮助。

4

1 回答 1

0

简化和统一您的模板和视图是一种选择。模板可以使用 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
于 2012-11-03T04:09:29.400 回答