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

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

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

首先，当我在控制台上运行下面的代码时，它会得到一个对象；但是不能转换为一个新模型或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.

    )

第二种方法:听一听扳机。这一次，使用主干更优雅，因为您不编写回调。

内部模型GetSomeData:-> @fecth()

内景

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

脊骨会自动为你触发一些事件，在这里读一读。http://backbonejs.org/#Events

就像您已经在做的一样，您也需要侦听集合上的一些触发器

var itemDetails =newapp.collections.ItemDetails()；//这是新行var model2 = itemDetails.fetch()；// 这里是问题