Backbone.js - ページリフレッシュ時の不正なリクエストエラー（URL）

Question

私は、Webサービスからクリック可能なプロジェクトのリストをレンダリングする、BackboneベースのWebアプリケーションの開発に取り組んでいます。クリックすると、そのプロジェクトの属性がフォームに入力されます。アンダースコアテンプレートを使用して、属性をHTMLページに取り込みます。各プロジェクトの属性は、URLルートの追加パラメータとしてプロジェクトIDを使用して、同じWebサービスから取得されます。私はhereのようにdata-idプロパティを使用してクリックした要素からIDを取得しており、この値を持つルートを追加する関数でモデルのURLを作成しています。

これはすべてプロジェクトの一覧ページで開始しますが、追加されたURL（webservice/project_id）を使用して特定のプロジェクトページを更新すると、プロジェクトID部分のURLはモデルに定義されていません。なぜこれが起こっているのか理解していますが、これを修正する方法がわかりませんか、動的URL作成に別の方法でアプローチする必要があるのでしょうか？ここで

は、モデルに関連するコードです：

var ThisProject = Backbone.Model.extend({ 

     initialize: function() { 

     ... 
     }, 
     url: function(){ 
     thisProjURL = 'http://XX.XXX.XX/api/projects/' + thisProjID; 
     return thisProjURL; 

     }, .... 

、ここでは、クリック可能なプロジェクトのリストを含むビューは、次のとおりです。

var ListProjectView = Backbone.View.extend({ 
    events: { 
    'click a': 'getId' 
    }, 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     var template = _.template(myprojecttpl); 
     this.$el.html(template({collection: this.collection.toJSON()})); 
    }, 

    getId: function(e){ 
     thisProjID = $(e.currentTarget).data("id"); 
    }, 

    }); 

これは、HTMLファイル内の該当する行です以下

<% _.each(collection, function(model) { %> 

<li><a href="#/thisproject-detail/<%= model.Pid %>" data-id="<%= model.Pid %>"><%= model.PjctName %></a></li> 
<% }); %> 

ルーティング・コードである：

下線変数と

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "" : "index", // this is where the list of projects is displayed 
     "login": "login", 
     "logout": "logout", 
     "project-detail": "projectDetail", 
     "thisproject-detail/:Pid": "thisProjectDetail", // this is the specific project 
     "project-search": "projectSearch", 
     "treatment-search": "treatmentSearch" 
    } 
    }); 
    // Initiate the router 
    var app_router = new AppRouter; 

    app_router.on('route:index', function() { 

    var _projectCollection = new ProjectCollection(); 

    _projectCollection.fetch(
     { success : onDataHandler, error: onErrorHandler } 
    ).then(function(response){ 
     var _ListProjectView = new ListProjectView({ collection: _projectCollection , 
     el: $("#myprojects") 
     }); 
    }); 
    }); 

    app_router.on('route:thisProjectDetail', function(e) { 

    var thisProjectData = new ThisProject(); 

      thisProjectData.fetch(
      { success : onThisDataHandler, error: onThisErrorHandler } 
      ).then(function(response){ 
       var _ThisProjectDetailView = new ThisProjectDetailView({model: thisProjectData, 
       el: $("#myprojects") 
       }); 
     }); 
    }); 

Answer 1

私はこの解決策を見つけました。それはうまくいくようですが、ちょっとハッキリです。私はまだ他のクリーナーのソリューションに興味があると思います：

（thisProjIDがグローバル変数である）

ThisProjectモデル/ thisProjectDetailビューのための私のルータでは：

thisProjIDに値がない場合は、単にチェックを追加します。もしそうなら、URL：

app_router.on('route:thisProjectDetail', function(e) { 
    console.log("routed to this project"); 

    //new // 
    if (thisProjID == "") { 
     var curURL = window.location.href; 
     console.log(curURL); 
     var projNum = (curURL.substr(curURL.lastIndexOf('/') + 1)); 
     thisProjID = projNum; 

    } 
    ///// 

    var thisProjectData = new ThisProject(); 

      thisProjectData.fetch(
      { success : onThisDataHandler, error: onThisErrorHandler } 
      ).then(function(response){ 
       var _ThisProjectDetailView = new ThisProjectDetailView({model: thisProjectData, 
       el: $("#myprojects") 
       }); 

     console.log(thisProjectData); 
     }); 
    });