Backbone/Underscore: 如何获取渲染中模型的索引?
Backbone/Underscore: How to get index of a model inside render?
我是 backbone 和下划线的新手,我正在尝试在渲染器上获取模型索引以在模板内进行一些命名。
这 post 有助于找到事件的索引,
Backbone.js: How to get the index of a model in a Backbone Collection?
但是如何在渲染或初始化时找到模型索引?
var SectionView = builder.classes.ItemView.extend({
template: _.template(
'<div class="pb-item-type-column pb-item custom-section">' +
'<div class="panel fw-row">' +
'<div class="panel-left fw-col-xs-6">' +
'<div class="column-title">Grid <%- item_index %></div>' +
'</div>' +
'<div class="panel-right fw-col-xs-6">' +
'<div class="controls">' +
'<i class="dashicons dashicons-edit edit-section-options"></i>' +
'<i class="dashicons dashicons-admin-page custom-section-clone"></i>' +
'<i class="dashicons dashicons-no custom-section-delete"></i>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="builder-items"></div>' +
'</div>'
),
events: {
'click': 'onSectionWrapperClick',
'click .edit-section-options': 'openSectionEdit',
'click .custom-section-clone': 'cloneItem',
'click .custom-section-delete': 'removeItem',
},
initialize: function() {
this.defaultInitialize();
},
render: function() {
this.defaultRender({
item_index: 'this is where I need the index'
});
},
cloneItem: function(e) {
e.stopPropagation();
var index = this.model.collection.indexOf(this.model),
attributes = this.model.toJSON(),
_items = attributes['_items'],
clonedSection;
delete attributes['_items'];
clonedSection = new Section(attributes);
this.model.collection.add(clonedSection, {
at: index + 1
});
clonedSection.get('_items').reset(_items);
},
openSectionEdit: function() {
this.modal.open();
},
removeItem: function() {
this.remove();
this.model.collection.remove(this.model);
},
});
var Section = builder.classes.Item.extend({
defaults: function() {
var defaults = _.clone(localized.defaults);
defaults.shortcode = fwThzSectionBuilder.uniqueShortcode(defaults.type + '_');
return defaults;
},
initialize: function() {
this.defaultInitialize();
/**
* get options from wp_localize_script() variable
*/
this.modalOptions = localized.options;
this.view = new SectionView({
id: 'fw-builder-item-' + this.cid,
model: this
});
},
allowIncomingType: function(type) {
if (type == 'columns') {
return true;
} else {
return false;
}
}
});
如果我至少可以在渲染时得到 parent ,它会进一步帮助我,但这也不起作用
$(this.el).parent();
更新和解决方案:
因为这不是我的应用程序,而且我正在扩展现有的应用程序,所以很难找到我的问题。我的问题是应用创建者在初始化和渲染时发起了超时
因此我很早就开始 collection 搜索。
Morslamina 的回答和引用的 post 都是正确的。
所以对于正在寻找索引的你,给你的索引搜索一些超时并检查。 Collection 必须在那里。
每个分配给集合的模型都应该有一个引用父集合的属性 this.collection
。从那里,获取模型的索引应该是微不足道的。
render: function(){
index = this.model.collection.indexOf(this.model)
}
请注意,如果您已将模型添加到多个集合中,这可能会变得有点复杂。在这种情况下,您将需要对您想要索引的特定集合的引用,因为 Backbone 不会自动知道您在谈论哪个集合。
编辑: 仔细查看您的代码后,我认为您遇到了范围界定问题。如果你真的在打电话
this.defaultRender({
item_index: this.model.collection.indexOf(this.model)
});
然后 this
的范围是您传递给 defaultRender 的对象,而不是视图。
试试看
index = this.model.collection.indexOf(this.model)
this.defaultRender({
item_index: index
});
我是 backbone 和下划线的新手,我正在尝试在渲染器上获取模型索引以在模板内进行一些命名。 这 post 有助于找到事件的索引, Backbone.js: How to get the index of a model in a Backbone Collection?
但是如何在渲染或初始化时找到模型索引?
var SectionView = builder.classes.ItemView.extend({
template: _.template(
'<div class="pb-item-type-column pb-item custom-section">' +
'<div class="panel fw-row">' +
'<div class="panel-left fw-col-xs-6">' +
'<div class="column-title">Grid <%- item_index %></div>' +
'</div>' +
'<div class="panel-right fw-col-xs-6">' +
'<div class="controls">' +
'<i class="dashicons dashicons-edit edit-section-options"></i>' +
'<i class="dashicons dashicons-admin-page custom-section-clone"></i>' +
'<i class="dashicons dashicons-no custom-section-delete"></i>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="builder-items"></div>' +
'</div>'
),
events: {
'click': 'onSectionWrapperClick',
'click .edit-section-options': 'openSectionEdit',
'click .custom-section-clone': 'cloneItem',
'click .custom-section-delete': 'removeItem',
},
initialize: function() {
this.defaultInitialize();
},
render: function() {
this.defaultRender({
item_index: 'this is where I need the index'
});
},
cloneItem: function(e) {
e.stopPropagation();
var index = this.model.collection.indexOf(this.model),
attributes = this.model.toJSON(),
_items = attributes['_items'],
clonedSection;
delete attributes['_items'];
clonedSection = new Section(attributes);
this.model.collection.add(clonedSection, {
at: index + 1
});
clonedSection.get('_items').reset(_items);
},
openSectionEdit: function() {
this.modal.open();
},
removeItem: function() {
this.remove();
this.model.collection.remove(this.model);
},
});
var Section = builder.classes.Item.extend({
defaults: function() {
var defaults = _.clone(localized.defaults);
defaults.shortcode = fwThzSectionBuilder.uniqueShortcode(defaults.type + '_');
return defaults;
},
initialize: function() {
this.defaultInitialize();
/**
* get options from wp_localize_script() variable
*/
this.modalOptions = localized.options;
this.view = new SectionView({
id: 'fw-builder-item-' + this.cid,
model: this
});
},
allowIncomingType: function(type) {
if (type == 'columns') {
return true;
} else {
return false;
}
}
});
如果我至少可以在渲染时得到 parent ,它会进一步帮助我,但这也不起作用
$(this.el).parent();
更新和解决方案:
因为这不是我的应用程序,而且我正在扩展现有的应用程序,所以很难找到我的问题。我的问题是应用创建者在初始化和渲染时发起了超时
因此我很早就开始 collection 搜索。
Morslamina 的回答和引用的 post 都是正确的。
所以对于正在寻找索引的你,给你的索引搜索一些超时并检查。 Collection 必须在那里。
每个分配给集合的模型都应该有一个引用父集合的属性 this.collection
。从那里,获取模型的索引应该是微不足道的。
render: function(){
index = this.model.collection.indexOf(this.model)
}
请注意,如果您已将模型添加到多个集合中,这可能会变得有点复杂。在这种情况下,您将需要对您想要索引的特定集合的引用,因为 Backbone 不会自动知道您在谈论哪个集合。
编辑: 仔细查看您的代码后,我认为您遇到了范围界定问题。如果你真的在打电话
this.defaultRender({
item_index: this.model.collection.indexOf(this.model)
});
然后 this
的范围是您传递给 defaultRender 的对象,而不是视图。
试试看
index = this.model.collection.indexOf(this.model)
this.defaultRender({
item_index: index
});