骨干路由

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. 你并不需要参考history。我不确定路由器是否有这样的属性。您应该拨打AppRouter.navigate。

2. 如果您希望路由器触发changeDay路线的方法，你需要传递一个选项trigger:true，就像这样：

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

然而，实际的解决方案仍然是简单得多。您可以完全移除事件绑定中的HeaderView.changeDay事件处理程序和click a.day-link事件。骨干路由器将检测到更改的URL，并自动调用与新URL匹配的路由器方法。