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

Question

我有一个使用 Backbone.Paginator.Fluenced 制作的购物车应用程序，并使用这个示例进行了分叉； https://github.com/msurguy/laravel-backbone-pagination

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

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

我的 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()
        }));
      }});
  }
});

Answer 1

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

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

第一种方式：回调

在您的模型/集合中

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

    )

第二种方式：监听触发器。 这个使用主干更优雅，因为你不编写回调。

内部模型 获取一些数据：-> @fecth()

内部视图

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

backbone 会自动为您触发一些事件，请在此处阅读。 http://backbonejs.org/#Events

正如你已经在做的那样，你也需要在集合上监听一些触发器

var itemDetails = new app.collections.ItemDetails(); // 这是新行 var model2 = itemDetails.fetch(); // 问题来了