3

我正在创建一个应用程序，它将事件的日期列为按钮，然后让您添加日期并单击每个日期以获取新的“每日日历”。

这是我第一个使用主干和下划线的真实世界应用程序，所以我一直遇到障碍。我非常感谢任何帮助我的人。

我现在正处于我的收藏充满日期的地步，我可以添加这些日期。现在我想弄清楚它路由链接以切换日历，具体取决于所选日期。

到目前为止，这是我与应用程序的这一部分相关的内容：

收藏品

var Days = Backbone.Collection.extend({
  url: daysURL
});

var Calendar = Backbone.Collection.extend({
    url: URL
});

楷模

var Header = Backbone.Model.extend();
var header = new Header();

var ConferenceDay = Backbone.Model.extend();
var conferenceDay = new ConferenceDay();

看法

 var HeaderView = Backbone.View.extend({
  el: $(".conf_days"),
  template: _.template($('#days').html()),
  events: {
      'click a.day-link': 'changeDay',
      'click #add_day' : 'addDay',
      'click #previous_day' : 'prevDay',
      'click #next_day' : 'nextDay',
      'click #delete_day' : 'deleteDay'
    },
    initialize: function(){
      _.bindAll(this, "render");
      this.collection = new Days();
      this.collection.fetch();
      this.collection.bind("reset", this.render, this);
    },
    render: function(){
      var JSONdata = this.collection.toJSON();
      this.$el.html(this.template({days: JSONdata}));

      console.log(JSON.stringify(JSONdata))
      return this;

    },
    changeDay: function(e){

      AppRouter.history.navigate($(this).attr('href'));
      return false;

    },
    addDay: function() {
      newDate = Date.parse($('.day-link:first-child').text()).add(1).day();
      var newDay = new  ConferenceDay();
      newDay.set({date_formatted: newDate});

      this.collection.add(newDay)
      newDay.save({
        success: function(){
          alert('yes')
        },
        error: function(){
          alert('no')
        }
      });
    },
    deleteDay: function(event){
      var id = $('.day-link:last-child').data("id");
      $('.day-link:last-child').remove();
    },
    prevDay: function() {

    },
    nextDay: function() {

    },
    loadTimes: function(){
      var html = time.get('times');
      $('.time_td').append(html);
    }

  });
 var headerView = new HeaderView({ model: header });


        ConferenceView = Backbone.View.extend({
  el: $(".calendar"),
  template: _.template($('#calendar').html()),
  events: {

    },
    initialize: function(){

      //this.listTracks();
      this.collection = new Calendar();
      this.collection.fetch();
      this.collection.bind("reset", this.render, this);
    },
    render: function(){
      var JSONdata = this.collection.toJSON();
      this.$el.html(this.template({days: JSONdata}));
    },

    listTracks: function() {
    }

  });
 var conferenceView = new ConferenceView({model:conferenceDay});

我目前的路线

 var AppRouter = Backbone.Router.extend({
  routes: {
  '' : 'index',
  'day/:id' : 'changeDay'
  },

  initialize: function() {
  },

  index: function() {

  },
  changeDay: function(id){
    alert("changed");
    this.calender.changeDay(id);
    this.dayView = new ConferenceView({model:conferenceDay});
    $('#calender').html(this.dayView.render().el).text('test');
  },
});
 var app = {
 init: function() {
  var routes = new AppRouter();
  Backbone.history.start({pushState: true});
  }
}
 app.init();

理想情况下，我希望用户单击day-link按钮并通过推送状态更新 url day/:id，然后#calender模板将使用从当天更新收到的正确模型信息进行更新。

4

1 回答 1

2

您的帖子中有很多代码，所以我不能 100% 确定以下内容会涵盖您需要做的所有事情，但这是一个开始

此事件处理程序可能会导致一些问题：

changeDay: function(e){
  AppRouter.history.navigate($(this).attr('href'));
  return false;
}

在细节层面上，这里有几件事：

  1. 你不需要参考history。我不确定路由器是否有这样的属性。你应该打电话AppRouter.navigate。

  2. 如果您希望路由器触发您的changeDay路由方法，则需要传递一个 option trigger:true，如下所示：

    AppRouter.navigate($(this).attr('href'), {trigger:true}).

但是，实际的解决方案仍然比这更简单。您可以从事件哈希中完全删除HeaderView.changeDay事件处理程序和事件绑定。click a.day-linkBackbone Router 会检测到改变的 URL，并自动调用匹配新 URL 的路由方法。

于 2013-02-23T15:35:11.197 回答