jquery - 主干/下划线 : How to get index of a model inside render?

Question

我是主干和下划线的新手，我正在尝试获取渲染上的模型索引以在模板内进行一些命名。这篇文章有助于找到事件索引， 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;
        }
     }

  });

如果我至少能让父级渲染，它会进一步帮助我，但这也不起作用

$(this.el).parent();

我正在扩展此https://github.com/ThemeFuse/Unyson-Builder-Extension/blob/master/includes/option-types/builder/static/js/builder.js

更新和解决方案:

由于这不是我的应用程序，而且我正在扩展现有的应用程序，因此很难找到我的问题。我的问题是应用程序创建者在初始化和渲染时启动了超时

https://github.com/ThemeFuse/Unyson-Builder-Extension/blob/master/includes/option-types/builder/static/js/builder.js#L348-L350

因此我很早就开始了馆藏搜索。

Morslamina 的回答和引用的帖子都是正确的。

因此，对于正在寻找索引的您，请给您的索引搜索一些超时并检查。收藏一定有。

Answer 1

分配给集合的每个模型都应该有一个引用父集合的属性this.collection。从那里，获取模型的索引应该很简单。

render: function(){
    index = this.model.collection.indexOf(this.model)
}

请注意，如果您已将模型添加到多个集合，这可能会变得更加复杂。在这种情况下，您需要引用您想要索引的特定集合，因为 Backbone 不会自动知道您正在谈论哪个集合。

编辑:仔细查看您的代码后，我认为您存在范围界定问题。如果您确实是在调用

this.defaultRender({
   item_index: this.model.collection.indexOf(this.model)
});

然后 this 的作用域为您传递给 defaultRender 的对象，而不是 View 。

尝试一下

index = this.model.collection.indexOf(this.model)
this.defaultRender({
   item_index: index
});