Question

我正在开发基于Backbone的webapp，它可以从Web服务呈现可点击的项目列表。单击时，将使用该项目的属性填充表单。我正在使用Underscore模板将属性填充到HTML页面中。每个项目的属性都来自同一个Web服务，项目ID作为URL根的额外参数。我使用如here所述的data-id属性从被点击的元素中获取ID，并使用一个函数创建模型的url，该函数将root附加到此值。

如果我从项目列表页面开始，这一切都有效，但是如果我刷新带有附加URL的特定项目页面（webservice / project_id），我收到一个'错误请求'错误，因为URL的项目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");
    },

  });

这是带有Underscore变量的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

我确实找到了这个解决方案..它似乎有效，但它有点hacky。我仍然对其他更清洁的解决方案感兴趣：

（thisProjID是一个全局变量）

在我的路由器中用于ThisProject model / 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);
        });
  });

Backbone.js - 页面刷新时出现错误请求错误（URL）

1 个答案: