Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Backbone.js 如何使用主干事件/Vent更改主干动态URL?_Backbone.js_Marionette_Single Page Application - Fatal编程技术网

Backbone.js 如何使用主干事件/Vent更改主干动态URL?

Backbone.js 如何使用主干事件/Vent更改主干动态URL?,backbone.js,marionette,single-page-application,Backbone.js,Marionette,Single Page Application,编辑了下面的内容 在下图中,我有两个主要区域 一个用于左侧的用户列表:allusersRegion 另一个用于显示布局的右侧,其中包含在allusersRegion中单击的用户的唯一属性和用户的文章列表:middleCoreRegion **如果您注意到middleCoreRegion正在显示所有用户的所有文章……这是错误的,我正在尝试显示单个用户的所有文章(在本例中为“kev”) 我试图查看我的问题是JSON api(通过node/rest/mongoose提供)还是下划线模板,但如果它同时

编辑了下面的内容

在下图中,我有两个主要区域

一个用于左侧的用户列表:allusersRegion

另一个用于显示布局的右侧,其中包含在allusersRegion中单击的用户的唯一属性和用户的文章列表:middleCoreRegion

**如果您注意到middleCoreRegion正在显示所有用户的所有文章……这是错误的,我正在尝试显示单个用户的所有文章(在本例中为“kev”)

我试图查看我的问题是JSON api(通过node/rest/mongoose提供)还是下划线模板,但如果它同时显示这两个列表,我想我需要从主干内部进行过滤

起初,我尝试使用一个Marionette.vent来简单地更改url,但由于无法将_id名称放入url:function(),它表示未定义

var someuser = this.model.get("_id"); 
myApp.vent.trigger("showarticles", someuser);
我在同一页面的主干集合中添加了一个侦听器:

myApp.vent.on("showarticles", someuser);
**这里的编辑(另一种方式)是我的代码

var usertab = Poplive.module('usertab', {
    startWithParent: true,       
});

usertab.addInitializer(function() {

User = Backbone.Model.extend({});
UniqueArticle = Backbone.Model.extend({});

//Collections
Users = Backbone.Collection.extend({
model: User,
url: '/api/user2'
});

UniqueArticles = Backbone.Collection.extend({
  model: UniqueArticle,
url:  '/api/survey'
});

//Layout
var VisitingLayoutView = Backbone.Marionette.Layout.extend({
  template: "#visiting-layout",
  regions: {
    firstRegion: "#listone",
    secondRegion: "#listtwo",
    thirdRegion: "#listthree",
    playRegion: "#playhere",
    articlesRegion: "#articleshere" 
  }
});

AllUserView = Backbone.Marionette.ItemView.extend({
template: "#tab-alluser-template",
tagName: 'li',
events:  {
  "click #openprofile" : "OpenProfile"
},

OpenProfile: function(){
  console.log("Profile is open for " + this.model.get("username"));
  var modelo = this.model.get("_id");
  var vlv = new VisitingLayoutView({model: this.model});
  Poplive.middleCoreRegion.show(vlv);

var ua = new UniqueArticles();
var uacoll = new UniqueArticlesView({collection: ua});
vlv.articlesRegion.show(uacoll);
}
})

//ItemViews
UniqueArticleView = Backbone.Marionette.ItemView.extend({
template: "#unique-article-template"
});

//CollectionViews
AllUsersView = Backbone.Marionette.CompositeView.extend({
   template: "#tab-allusers-template",
   itemView: AllUserView
});

UniqueArticlesView = Backbone.Marionette.CollectionView.extend({
  template: "#unique-articles-template",
  itemView: UniqueArticleView
});

//Render Views
var alluserview = new AllUserView();
var allusersview = new AllUsersView();

//Fetch Collections
var theusers = new Users();
theusers.fetch();
var userscoll = new AllUsersView({collection: theusers});
Poplive.allusersRegion.show(userscoll);
           });

假设
UniqueArticle
是主干模型,对于要获取的具有特定id的模型,您需要定义urlRoot属性,该属性将模型的
id
附加到请求中

因此,当您从服务器获取模型时,id属性将附加到请求的末尾

  var UniqueArticle = Backbone.Model.extend({
      idAttribute : 'someuser',
      urlRoot : function(someuser){
          return '/api/visitingarticles/'
      }
       // this would send a request for 
        //  /api/visitingarticles/someId
    });

    var UniqueArticles = Backbone.Collection.extend({
      model: Article,
      url : function(someuser){
          return '/api/visitingarticles/'
      }
      //  /api/visitingarticles   -- All Articles will be fetched
    });

我认为您想要的是将
url
定义为一个函数,并在您的集合中具有
user
属性:

var UniqueArticles = Backbone.Collection.extend({
  model: Article,

  initialize: function(){
    var self = this;
    myApp.vent.on("showarticles", function(someuser){
        self.user = someuser;
        self.fetch();
    }
  },

  url : function(){
      var fragment = '/api/visitingarticles/';
      if(this.user && this.user.id){
        return fragment + this.user.id;
      }
      return fragment;
  }
});
(免责声明:未经测试的代码,但它在我的头脑中工作:D)

然后,每次触发事件时,
user
属性都会更新,集合会用更新的url重置

作为补充说明,您可能希望研究使用过滤的集合。我在书中根据德里克·贝利的代码实现了这个想法:

以下是我的版本:


以及它的使用示例(第38-41行):

谢谢您的回复。我试过了,但不幸的是,我无法使用URL函数之外声明的任何变量或对象。例如,当我尝试使用“this.user.id”console.log时,会说“UNDEFINED”,即使它给出了URL函数之外的值。我用图片和完整的代码编辑了上面的问题,以防有帮助。其次,我查看了过滤后的集合,因此决定这可能是另一种方式。顺便说一句,前几天我看了你的书和教程,它们帮了我很大的忙。我试过了,但没用。不知何故,我无法将变量引入url函数,它在console.log中显示为“UNDEFINED”。您是否为模型指定了
idattribute