0

我正在开发一个应用程序，其中有两个面板 - 左面板和右面板。左侧面板是不同项目的列表，当单击其中任何一个时，右侧面板会显示有关该项目的信息。

右侧面板具有相同的视图，只是数据不同。

如何在 Backbone 中实现这一点。目前，我正在为每个项目创建集合实例并将其传递给视图。但是所有实例都具有相同的数据。

我是 Backbone 的新手，我必须自己解决这个问题。

4

2 回答 2

0

从您所说的来看，听起来您真的只想要一个集合实例，它将保存您所指的项目（集合中的模型实例）。

在这个场景中还应该有 3 个视图——一个用于List（左面板），一个用于该ListItem列表中的单个 s，一个用于显示有关Item自身的信息（右面板）。

列表

视图保存对集合的List引用，并为集合ListItem中的每个项目附加一个视图。您稍后可能希望订阅集合上的事件，以便在从集合中添加/删除新项目时自动从列表中追加/删除项目。这是应该处理的视图。

List = Backbone.View.extend({
  el: '#list',

  initialize: function(){
    _.bindAll(this)
    this.collection.each(this.appendItem)
  },

  appendItem: function(item) {
    view = new ListItem({model: item})
    $(this.el).append(view.render().el)
  }
})

项目清单

该ListItem视图保存对特定模型的引用，并在该模型的列表中呈现列表项。它还处理单击事件，该事件呈现该Item模型的视图。

ListItem = Backbone.View.extend({
  tagName: 'li',

  events: {
    "click" : "showInfo"
  },

  initialize: function(){
    _.bindAll(this)
  },

  render: function(){
    $(this.el).html(renderTemplate("listItem", this.model))
    return this
  },

  showInfo: function(){
    view = new Item({model: this.model})
    $('#item').html(view.render().el)
  }
})

物品

该Item视图还保存对特定模型的引用并呈现有关该模型的信息。这是您所指的右侧面板。

Item = Backbone.View.extend({
  initialize: function(){
    _.bindAll(this)
  },

  render: function(){
    $(this.el).html(renderTemplate("item", this.model))
    return this
  }
})

这是一个展示实际操作的小提琴。

于 2013-02-15T04:29:05.137 回答
0

如果我正确理解了这个问题，你可以这样做。应该有 3 个对象，模型、左视图和右视图。对于左侧面板中的每个项目，您可以实例化一个 LeftView 和一个模型。而且一旦点击了任何一个LeftView，就可以基于相同的模型实例化RightView。您可以对 RightView 使用相同的模型，因为 LeftView 也具有相同的数据。

于 2013-02-14T18:43:02.283 回答