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 つあります。

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 と交換します):

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

これでうまくいきました。しかし、それは本当に面倒です。私はレールでバックボーンを使用しているため、6 つ以上の異なるファイルが JSON 要求を受け取ってレンダリングするだけです。それは厄介な感じで、もっと良い方法があります。私はそれがどれなのかまだわかりません。

Railsでこれをやったら、これをすべて引き出すことができる1つのビューを持つことができると思っています!?

collection.each を使用して、ネストされたコレクションをテンプレートに渡すことはできますか?

ここで少し立ち往生しています。私はこれが得意ではないので、どんな助けも大いに受けています。

4

1 に答える 1

0

テンプレートとビューを単純化して統合することは、1 つのオプションです。テンプレートはjsonオブジェクトを使用できるため、配列をレンダリングできます。これは、あなたの場合のようにリストをレンダリングするのに適しています. たとえば、1 つのテンプレートを使用して任意のリストを実際にレンダリングする ListView を 1 つだけ作成し、このビューをメイン ビューでコレクション オブジェクトの両方のプロパティに再利用できます。次の例で、どこをどのように簡素化できるかを理解していただければ幸いです。

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 に答える