javascript - Backbone.js - 是否可以为模型定义多个 el 值？

Question

这个问题已经有答案了:

Backbone.js - how to define a model which uses multiple search models (1 个回答)

已关闭 8 年前。

我想定义 SearchApp(扩展 Backbone.view)的 model 和 el 属性，以便在 3 个不同的 ElasticSearch 索引内进行搜索。但是，我希望每个结果都显示在单独的 div 中，每个模型都有一个不同的 div。我现在拥有的是:

var searchApp = new SearchApp({model: [searchModel1, searchModel2, searchModel3], el: $("#results1")});

但我最想要的是

var searchApp = new SearchApp({model: [searchModel1, searchModel2, searchModel3], el: [$("#results1"),$("#results2"),$("#results3")]});

这样searchModel1返回的数据显示在div results1内部，searchModel2返回的数据显示在div results2内部，searchModel3返回的数据显示在div results3内部。但是，这对我不起作用，我无法用列表定义 el 。有没有解决这个问题的方法，或者这是否可能？非常感谢!

Answer 1

开箱即用，它不会工作并且是错误的，但是一种解决方法和更正确的方法是这样的。

不使用模型:使用集合:并将其包装到新的 Backbone.Collection 中

跳过默认 el 的使用并将其作为结果占位符传递，然后在渲染时使用它

var searchApp = new SearchApp({collection: new Backbone.Collection([searchModel1, searchModel2, searchModel3]), placeholders: [$("#results1"),$("#results2"),$("#results3")]});


SearchApp = Bb.View.extends({
initialize: function (options) {
   this.placeholders = options.placeholders
}
render: function() {
    //for each this.placeholders render searchModel (event better wrap it in new view)
}

});

然而，这样你的 searchApp 实际上就不再是一个 View ，而是某个实例的管理器。

我建议每个 View 应该有自己的模型，我的猜测是您已经知道会有多少个搜索模型及其 View 对象。因此，只需创建一个接受模型和 $ 并为您创建 View 的方法。

function(model, $el) {
return new SearchApp({model: model, $el: $el});
}

然后在该 View 中监听您收到的搜索响应并进行相应的渲染。