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）

回答

相关问题