0

I have this wrapper around Ember.Select, to activate Select2 features:

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

});

Sometimes I need to make a drop-down invisible, and I do it like this:

{{#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}}

But whenever the drop-down is invisible, I get the following error:

Uncaught TypeError: Cannot call method 'select2' of undefined

I guess the element is inserted, but then removed by Ember from the DOM (bound property cityVisible), so that jQuery is not able to find it?

What can I do to avoid that error message? I do not want to make the view visible/invisible, I want to keep the whole control-group under the cityVisible control.

4

1 回答 1

2

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

HTML

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

CSS

.hideCities {
  display: none;
}

删除{{#if}}html 块周围的内容，并用 a 包裹它，div在该类上设置一个 css 类，其中包含display: none;您可以cityVisible在视图或控制器中使用 the 或其他属性并将其设置为 true/false 以切换其可见性。这种机制应该将您的 html 标记留在 DOM 中，因此可用于 jQuery。请注意，如果您的citiesVisible属性位于您的控制器中，则从to be only中删除view.前缀，这取决于您的设置。view.citiesVisiblecitiesVisible

在此处查看演示。

希望能帮助到你。

于 2013-08-09T20:03:29.343 回答