骨幹路由

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匹配的路由器方法。