Backbone.js - kötü istek hatası (URL) sayfa yenilendi

Question

Web servisinden tıklanabilir bir proje listesi oluşturan Backbone tabanlı bir webapp üzerinde çalışıyorum. Tıklandığında, o projenin özellikleriyle bir form doldurulur. Niteliklerini bir HTML sayfasına yerleştirmek için Tempcore şablonunu kullanıyorum. Her bir projenin özellikleri aynı web hizmetinden gelir ve proje kimliğiyle URL köküne ek bir parametre olarak gelir. Kimliği tanımlanan elemandan here açıklandığı gibi data-id özelliğini kullanarak alıyorum ve bu değere root ekleyen bir işlevle model için url oluşturuyorum.

Tüm bunlar, proje listesi sayfasında başlıyorum, ancak belirli proje sayfasını ekli URL (webservice/project_id) ile yenilediğimde, proje kimliği bölümü için bir 'hatalı istek' hatası alıyorum. URL modelde tanımlanmadı. Bunun neden olduğunu anlıyorum, ancak bunu nasıl düzelteceğimi bilmiyorum, yoksa dinamik URL oluşturmaya başka bir şekilde yaklaşmalı mıyım? İşte

model için ilgili kodudur:

var ThisProject = Backbone.Model.extend({ 

     initialize: function() { 

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

     }, .... 

ve burada tıklanabilir projelerin listesini içeren görünümüdür:

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"); 
    }, 

    }); 

Bu HTML dosyasındaki ilgili çizgidir Underscore değişkeni ile: Aşağıda

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

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

yönlendirme kodu:

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

Bu çözümü buldum ... işe yaramış gibi görünüyor ama biraz da hacky. Hala diğer temizleyici çözümlerinde ilgi duyarım:

ThisProject model için benim yönlendirici/thisProjectDetail görünüm olarak

(thisProjID global değişkendir): thisProjID hiçbir değeri varsa

sadece bir işareti eklenir; öyleyse, şu URL'den edinin:

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); 
     }); 
    });