Как отключить множественный выбор компонентов в ember-widgets

Есть ли способ отключить компонент множественного выбора из ember-widgets addepar?

Это работает для сингла select-component

{{select-component
  contentBinding="selectCountries"
  prompt="Select a Country"
  value=selectSelected
  disabled=true
}}

То же самое не работает для multi-select-component

{{multi-select-component
  contentBinding="selectCountries"
  prompt="Select a Country"
  selections=multiSelectSelected
  disabled=true
}}

Вот неработающий пример JS bin. Я просмотрел исходный код, похоже, для этого нет возможности.


select ember.js multiple-select
person artburkart    schedule 19.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Самый быстрый способ, который я мог придумать, чтобы сделать это, если не считать редактирования исходного кода, был следующим (обновлен JS bin):

Я определил компонент Ember, который принимает массив строк (selections) в качестве единственного параметра. Я использовал все классы, используемые multi-select-component, поэтому мне не пришлось переопределять весь CSS:

<script type="text/x-handlebars" id="components/disabled-multi-select">
  <div class="ember-view ember-select multi-select-disabled" tabindex="-1">
    <div class="ember-select-container ember-select-multi dropdown-toggle js-dropdown-toggle">
      <ul class="form-control ember-select-choices">
        {{#each selection in selections}}
        <li class="ember-view ember-select-search-choice">
          <div>{{selection}}</div>
          <div class="ember-select-search-choice-close">×</div>
        </li>
        {{/each}}
      </ul>
    </div>
  </div>
</script>

Затем я добавил немного CSS, чтобы он выглядел как отключенный выбор:

.ember-select.multi-select-disabled > .ember-select-container > .form-control {
  cursor: not-allowed;
  background-color: #EEE;
  opacity: 1;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice {
  background-color: #D8D8D8;
  cursor: not-allowed;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close {
  cursor: not-allowed;
}
.ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close:hover {
  background-color: #D8D8D8;
}

Он используется так:

{{#if isInputDisabled}}
  // Stick your multi-select-component in here
{{else}}
  {{disabled-multi-select selections=multiSelectSelected}}
{{/if}}
person artburkart    schedule 19.08.2014
comment
Оказывается, это ошибка, которую мне, возможно, придется исправить. - person artburkart; 21.08.2014