1

我是 Backbone 的新手 + CoffeeScript 的新手。我有一个从 URL 检索数据（属性）的集合。在我的 homeView 中，我将此数据附加到模板并循环遍历它：

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

这工作正常。

但是，当我想查看单个行（属性）时，我仍然使用相同的集合并更改模型（id）中的属性，以更改集合中调用的 URL 并仅检索一条数据（一个属性）。

我编码的方式是，在我的个人属性视图中，它仍然循环通过集合（即使只有一行），并将其附加到主视图

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>

我需要实现的是能够将信息传递到一个视图中，并且不需要下划线中的循环语句，而不必将其附加到主视图（因为它只是一个单独的数据）。

所以我只有一个看起来像这样的视图：

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

我不，我需要更改 ShowPropertyView 中的某些内容，我只是不确定是什么？任何帮助将非常感激！谢谢。

4

1 回答 1

1

我认为解决您的问题的最佳方法是将描述的功能分成两个视图。我真的建议使用backbone.js 约定通过传递给它们的构造函数模型实例或集合实例来实现简单的视图，就像在文档中一样。

此解决方案的代码如下所示。一个模型的第一个视图

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 回答