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按钮并通过推送状态将网址更新为day/:id，然后使用正确的模型信息更新#calender模板从当天更新收到。

Answer 1

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

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

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

在详细程度上，有几件事情在这里：

您无需引用history。我不确定路由器是否有这样的属性。您应该致电AppRouter.navigate。
如果您希望路由器触发changeDay路由方法，则需要传递选项trigger:true，如下所示：
```
AppRouter.navigate($(this).attr('href'), {trigger:true}).
```

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

骨干路由

1 个答案: