javascript - 主干路由

Question

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

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

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

到目前为止，这是我对这部分应用程序的了解:

收藏

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 模板将使用当天更新收到的正确模型信息进行更新。

Answer 1

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

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

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

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

1. 您不需要引用历史。我不确定路由器是否具有这样的属性。您应该改为调用 AppRouter.navigate。

2. 如果你想让路由器触发你的changeDay路由方法，你需要传递一个选项trigger:true，像这样:

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

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