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

以上代码的一切都很好。

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

所以我制作了一个新的Backbone模型和集合;

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开发者控制台上运行以下代码时，它会获得一个Object; 但无法转换为新模型或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： - ＆GT; @fecth（）

内幕视图

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

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

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

var itemDetails = new app.collections.ItemDetails（）; //这是新行 var model2 = itemDetails.fetch（）; // 这是问题

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

1 个答案: