0

我有一个呈现日历的 Backbone 视图，该视图又为每一天呈现一个子视图。每天都有一个模型和一个单击事件，可以选择或取消选择这一天。如果选择了一天，则保存模型，如果取消选择，则销毁模型。

一旦视图的模型被销毁（因为取消选择了日期），如果重新选择日期，我不确定如何在日历日期集合中保存新模型。视图只知道模型——不知道集合。当模型被销毁时，日历视图是否应该处理创建新模型并将其附加到日期视图？还是应该将日期视图传递给集合并自行执行？还是有更好的解决方案？

为了清楚起见，以下是我的一些代码片段：


var CalendarView = Backbone.View.extend({
  initialize: function () {
    this.model.dates.on('reset', this.renderDates, this);
  },

  renderDates: function () {
    // Loop through the number of days to display and create a view for each.

      // Find a model for the date. If one doesn't exist, this returns a new model.
      model = this.model.dates.completedOn(date.format('YYYY-MM-DD'));

      view = new DateView({
        model: model
      });

      $dates.append(view.render().el);

    // End loop.
  }
});


var DateView = Backbone.View.extend({
  events: {
    'click .date': 'toggleDate'
  },

  toggleDate: function () {
    if (this.model.selected()) {
      this.model.destroy();
    }
    else {
      this.model.save();
    }
  }
});

谢谢你的帮助！

4

1 回答 1

2

听起来你应该有这样的设置：

  1. ABackbone.Model为选定的日期。我们称之为M.
  2. ABackbone.Collection容纳所有M模型。我们称之为C.
  3. A Backbone.View, VM, 表示单个选定日期，model属性将为M.
  4. A Backbone.View, VC, 代表一整月（或一年或任何您显示的内容），该collection属性将是 a C。

然后可以在其集合上VC侦听事件，并在将新的选定日期添加到.'add'VMC

M从 a中删除aC也相当简单。模型上的任何事件也将在其集合上触发（如果有的话）。因此，要取消选择日期，只需销毁模型即可。VC可以收听其集合上的'destroy'事件，并根据需要清理VM其整体显示。

通过这种方式，您可以将大部分时间花在与集合交谈以管理您选择的日期，并通过响应适当的事件来自行解决所有其他问题。

这是一个快速的'n'dirty演示，应该向您展示这些部分是如何组合在一起的：http: //jsfiddle.net/ambiguous/TYMTM/

于 2012-10-20T19:11:19.343 回答