Backbone.js - 頁面刷新時的錯誤請求錯誤（URL）

我正在研究基於Backbone的web應用程序，該應用程序呈現Web服務中可點擊的項目列表。單擊時，表單將填充該項目的屬性。我正在使用Underscore模板將屬性填充到HTML頁面中。每個項目的屬性來自同一個Web服務，項目ID作爲URL根目錄的額外參數。我使用here中描述的data-id屬性從點擊的元素中獲取ID，然後使用爲該根添加此值的函數創建模型的url。Backbone.js - 頁面刷新時的錯誤請求錯誤（URL）

如果我從項目列表頁面開始，但如果使用附加的URL（webservice/project_id）刷新特定項目頁面，我會收到一個'錯誤請求'錯誤，因爲項目ID部分是網址未在模型中定義。我明白爲什麼會發生這種情況，但我不知道如何解決這個問題，或者我應該以另一種方式進行動態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") 
       }); 
     }); 
    });

來源

2016-04-06 JasonBK

這些視圖在哪裏創建？代碼更新位置在哪裏？你需要的是一個骨幹路由器。路由器應該創建視圖並處理位置。 –

你在哪裏取你的收藏？ – vini

@TJ我有路由，請參閱我上面的編輯 – JasonBK

我確實找到了這個解決方案..它似乎工作，但它有點hacky。我仍然有興趣在其他更清潔的解決方案：

（thisProjID是一個全局變量）

在我的路由器ThisProject模型/ thisProjectDetail觀點：

只需添加一個檢查，如果thisProjID沒有價值;如果是這樣，從網址獲取：

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

來源

2016-04-07 14:24:59 JasonBK

Backbone.js - 頁面刷新時的錯誤請求錯誤（URL）

回答

相關問題