Javascript 视图中的主干分页器多模型

我用Backbone.Paginator.fluent和fork制作了一个购物车应用程序

我做了一些小的改变； 当您单击项目链接时，它会打开一个引导模式窗口。 代码如下

app.views.ItemView = Backbone.View.extend({
  tagName: 'div',
  className: 'col-sm-4 col-lg-4 col-md-4',
  template: _.template($('#ProductItemTemplate').html()),
  events: {
    'click a.openModal': 'openModal'
  },
  initialize: function() {
    this.model.bind('change', this.render, this);
    this.model.bind('remove', this.remove, this);
  },
  render : function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  openModal : function () {
    var view = new app.views.ModalView({model:this.model});
    view.render();
  }

});

这是我的ModalView，在一个模态窗口中显示产品详细信息

app.views.ModalView = Backbone.View.extend({
  template: _.template($('#modal-bsbb').html()),
  initialize: function() {
    _.bind(this.render, this);     
  },
  render: function () {
    $('#myModalPop').modal({backdrop: 'static',keyboard: true});
    $('#myModalPop').html(this.template({
      'model':this.model.toJSON()
    }));
    return this;
  }
 });

对于上述代码，一切正常

我决定优化这段代码，并希望在这方面有所改进。 首先，我获取所有产品数据并将这些数据发送到模态窗口。 我想我必须只发送主元数据，并且必须从这些窗口获取详细信息

所以我做了一个新的主干模型和集合

app.models.ItemDetails = Backbone.Model.extend({});

app.collections.ItemDetails = Backbone.Collection.extend({
  model: app.models.ItemDetails,
  dataType: 'json',
  url : "/api/item-details",
  parse: function(response){
    return response.data;
  }
});

My api返回JSON:

{"data":{"id":8,"title":"Product 8","seo":"product-8","code":"p8","review":"Lorem30"}}

我的问题是向ModalView添加多个模型； 我在博客和论坛上尝试了很多例子和问题，但都找不到任何解决办法

我尝试了很多方法（$.extend，设置模型和模型vs…） 更改ModalView，以下代码是它们的最后位置

app.views.ModalView = Backbone.View.extend({
  template: _.template($('#modal-bsbb').html()),
  initialize: function() {
    _.bind(this.render, this);     
  },
  render: function () {
    var itemDetails = new app.collections.ItemDetails(); // this is new line
    var model2 = itemDetails.fetch(); // this is new line
    $('#myModalPop').modal({backdrop: 'static',keyboard: true});
    $('#myModalPop').html(this.template({
      'model1':this.model.toJSON(),
      'model2':model2.model // this is new line
    }));
    return this;
  }
});

我想在下划线模板中添加第二个模型。但是不能

首先，当我在chrome开发者控制台上运行下面的代码时，它会得到一个对象； 但无法转换为新模型或JSON

  var itemDetails = new app.collections.ItemDetails(); 
  var model2 = itemDetails.fetch(); 
  console.log(model2); // gets fetch data as an object

恐怕我不知道问题到底出在哪里

对不起，伙计们，我不是一个骨干专家，也许我做错了什么，尽管我在论坛上搜索了很多。我一次又一次地读到它，但我无法解决这个问题。你能帮帮我吗。先谢谢你

求解：

经过搜索并在下面的帮助下回复。 我解决了我的问题

app.views.ModalView = Backbone.View.extend({
  template: _.template($('#modal-bsbb').html()),
  initialize: function() {
    _.bind(this.render, this);    
  },
  render: function () {
    var _thisView = this;
    var itemsDetails = new app.collections.ItemsDetails();
    itemsDetails.fetch({
      success:function(data){
        $('#myModalPop').modal({backdrop: 'static',keyboard: true})
        .html(_thisView.template({
          'model1':_thisView.model.toJSON(),
          'model2':data.at(0).toJSON()
        }));
      }});
  }
});

---

使用主干网对服务器的每个请求都是异步的，这意味着您不会在请求之后立即返回数据，可能服务器仍在处理数据

要解决这个问题，有两种方法

第一种方法：回调

在您的模型/系列中

GetSomeData:->
    @fetch(
       success:=(data)>
           console.log data // the returned data from server will be avaiable.

    )

第二种方法：倾听触发信号。 这一个使用主干更优雅，因为您不编写回调

内部模型 GetSomeData:-> @fecth（）

内部视图

initialize:->
    @model = new KindOfModel()
    @model.on "sync", @render, @

主干将自动为您触发一些事件，请阅读此处。

正如你已经在做的那样，你还需要听一些关于集合的触发器

var itemDetails=new app.collections.itemDetails（）；//这是新线

---

var model2=itemDetails.fetch（）；//问题出在这里

谢谢，我尝试了第一种方法，然后在responseText中得到了一个对象json数据。无论如何，我无法将此模型转换为jSON模板。但它给出了错误。