Question

我有Ember.Select的这个包装，以激活Select2功能：

App.Select2SelectView = Ember.Select.extend({
    prompt: 'Please select...',
    classNames: ['input-xlarge'],

    didInsertElement: function() {
        Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
    },

    processChildElements: function() {
        this.$().select2({
            // do here any configuration of the
            // select2 component
            escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
        });
    },

    willDestroyElement: function () {
        this.$().select2('destroy');
    }

});

有时候我需要让一个下拉不可见，我这样做：

{{#if cityVisible}}
    <div class="control-group">
        <label class="control-label">City</label>
        <div class="controls">
            {{view SettingsApp.Select2SelectView
                id="city-id"
                contentBinding="currentCities"
                optionValuePath="content.city"
                optionLabelPath="content.city"
                selectionBinding="controller.selectedCity"
                prompt="Select a city"}}
            <i class="help-block">Select the city for your geographical number</i>
        </div>
    </div>
{{/if}}

但只要下拉列表不可见，我就会收到以下错误：

Uncaught TypeError: Cannot call method 'select2' of undefined

我想该元素已插入，但后来被Ember从DOM（绑定属性cityVisible）移除，因此jQuery无法找到它？

我该怎么做才能避免该错误消息？我不想让视图可见/不可见，我希望将整个control-group保留在cityVisible控件下。

Answer 1

这是ember删除视图的正常行为，作为解决方法，您可以执行以下操作：

HTML

<div {{bindAttr class="view.cityVisible::hideCities"}}>
  <div class="control-group">
    ...
  </div>
</div>

CSS

.hideCities {
  display: none;
}

删除html块周围的{{#if}}，然后用div包裹它，而不是在其上设置包含display: none;的css类，您可以使用cityVisible或视图或控制器中的不同属性，并将其设置为true / false以切换其可见性。这个mecanisnm应该在DOM中保留你的html标记，因此可用于jQuery。请注意，如果您的citiesVisible媒体资源存在于您的控制器中，则将view.前缀从view.citiesVisible移除为citiesVisible，具体取决于您的设置。

请参阅演示here。

希望它有所帮助。

Ember在创建元素后从DOM中删除元素，而jQuery无法找到它

1 个答案:

HTML

CSS