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にオプションを渡す必要があります。trigger:true

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

ただし、実際の解決策はそれよりも簡単です。HeaderView.changeDayイベント ハンドラーとclick a.day-linkイベント バインディングをイベント ハッシュから完全に削除できます。バックボーン ルーターは変更された URL を検出し、新しい URL に一致するルーター メソッドを自動的に呼び出します。

于 2013-02-23T15:35:11.197 に答える