1

私は Backbone が初めてで、CoffeeScript も初めてです。URL からデータ (プロパティ) を取得するコレクションがあります。私の homeView では、このデータをテンプレートに追加してループします。

<ul>
     <% _.each(data, function (row) { %>
          <li><%= row.get('name') %></li>
     <% }); %>
</ul>

これはうまくいきます。

ただし、個々の行 (プロパティ) を表示する場合でも、同じコレクションを使用してモデル (id) の属性を変更し、コレクションで呼び出される URL を変更して、1 つのデータ (1 つのプロパティ) のみを取得します。 ）。

私がそれをコーディングした方法は、私の個々のプロパティ ビューでは、コレクションをループし (行にしかありませんが)、メイン ビューに追加します。

class ShowPropertyView extends Backbone.View
    constructor: ->
        super

    initialize: ->
        @Property = new PropertyCollection #New collection
        @Property.PropertiesModel.set({theID: @options.theID}) #Change URL and get one property with a specific ID

    template: _.template($('#showProperty').html())
    #propertyInfoTemplate: _.template($('#propertyInfoTemplate').html())

    render: ->
        #$(@.el).html(@template) #load main template
        @loadResults() #load individual property

    loadResults: ->
        @Property.fetch({
            success: (data) =>
                         $('#propertyInfo').append(@propertyInfoTemplate({data: data.models, _:_})) #Load data into another template & append template to main template
            error: ->
                alert('Unable to load information')
        })

現在のテンプレート (データを受け取り、メイン テンプレートに追加される) は次のようになります (私の homeView テンプレートに似ています)。

<div>
     <% _.each(data, function (row) { %>
          <div>
               <h3><%= row.get('name') %></h3>
          </div>
     <% }); %>
</div>

私が達成する必要があるのは、情報を 1 つのビューに渡し、アンダースコアのループ ステートメントの必要性を取り除き、これをメイン ビューに追加する必要がないことです (これは単なる個々のデータであるため)。

したがって、次のようなビューが 1 つだけあります。

<div>
     <h3><%= row.get('name') %></h3>
</div>

いいえ、ShowPropertyView で何かを変更する必要があります。何がわからないのですか? どんな助けでも大歓迎です！ありがとう。

4

1 に答える 1

1

問題を解決するための最良のアイデアは、説明されている機能を 2 つのビューに分割することだと思います。docs のように、モデル インスタンスまたはコレクション インスタンスをコンストラクターに渡すことで単純なビューを実装する backbone.js 規則を使用することを強くお勧めします。

このソリューションのコードを以下に示します。1 つのモデルの最初のビュー

class OnePropertyView extends Backbone.View

  template: _.template($('#oneProperty').html())

  render: ->
    @model.fetch
      success: =>
        $('#propertyInfo').append(@template({model: @model}))

そしてそのためのテンプレート：

<div>
    <h3><%= model.get('name') %></h3>
</div>

コレクション ビューのコード:

class CollectionPropertyView extends Backbone.View

  template: _.template($('#collectionProperty').html())

  render: ->
    @collection.fetch
      success: =>
        $('#propertyInfo').append(@template({collection: @collection}))

コレクション処理のテンプレート:

<ul>
    <% collection.forEach(function (model) { %>
        <li><%= model.get('name') %></li>
    <% }); %>
</ul>

上記のコードは、たとえばルーターで次のように使用できます。

model = new PropertyModel(id: modelId) # modelId retrived from URL
view = new OnePropertyView(model: model)
view.render()

そしてコレクション用

collection = new PropertyCollection();
view = new CollectionPropertyView(collection: collection)
view.render()

コレクション ビューが少し複雑な場合、たとえば行ごとにいくつかのアクションがある場合など、入れ子になったビュー (行を表す) を実装するとよい場合があります。このアプローチは、すべての行に対してイベント マッピングを使用できるため、よりシンプルで読みやすくなっています。

于 2012-10-04T20:22:37.843 に答える