Ember автодополнение - выпадающий список - с использованием bootstrap

Использование html select это замечательно, но нет поля ввода, для того чтобы подгружать ограниченный список с бакэнда. В моем случае бакэнд выдает за раз 10 записей. Да и не разумно в select грузить 1000 записей. Поэтому, я сделал в Ember приложении для формы поля input автодополнение с выпадающим списком используя bootstrap button dropdown. Надо, конечно еще над дизайном выпадающего списка поработать, но данное решение рабочее и может использоваться в формах.

template.hbs

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Customer:</label>
    <div class="top dropdown" id="search-bar">
      <span class="fa fa-search" id="btn-search" data-toggle="dropdown"></span>
      {{input type="text" value=personValue focus-in='focusedCustomer' key-up=(action 'handleFilterCustomer') autocomplete="off" class="form-control" placeholder="Enter customer name"}}
      <ul class="dropdown-menu">
        {{#each model.customers as |customer|}}
          <li class="list-group-item" onclick={{action "customerClick" customer.name customer.id}}>{{customer.name}}</li>
        {{/each}}
      </ul>
    </div>
  </div>
</form>

route.js

model() {
  return RSVP.hash({
    task: this.store.createRecord('task'),
    customers: this.store.peekAll('person'),
  });
},

controller.js

export default Ember.Controller.extend({
  personValue: '',
  init: function() {
    this.store.unloadAll('person');
  },
  actions: {
    //При фокусе на инпут поле имитирую нажатие кнопки btn-search, для раскрытия списка
    focusedCustomer: function(){
      //console.log('focusedCustomer');
      $('#btn-search').click();
    },
    //Ищу имя после ввода 3 символа, перед этим очищаю локальное дата хранилище для person
    handleFilterCustomer(){
      let filterInputValue = this.get('personValue');
if(filterInputValue.length<3){
//console.log('value<3',filterInputValue);
        this.store.unloadAll('person');
} else {
        this.store.unloadAll('person');
        this.get('store').query('person', { name: filterInputValue });
        //console.log('value>3',filterInputValue);
}
},
    //Выбор человека из списка
    customerClick(customer_name, customer_id){
      //Вставляю имя выбранного человека в инпут
      this.set("personValue", customer_name);
      //беру запись в хранилище
      let customer = this.store.peekRecord('person', customer_id);
      //и присваиваю к полю задачи
      this.set('model.task.customer', customer);
    },
  }
});

Ember локализация

Для локализации Ember приложений я использую - ember-i18n

Установка

$ cd my-ember-project
$ ember install ember-i18n

Настройка

В config/environment.js устанавливаю русскую локализацию по умолчанию:

  var ENV = {
    ...
    i18n: {
      defaultLocale: 'ru'
    },
  ...
  }

Создание файла для русского перевода - ru

Запускаю команду генерации русской локализации, которая создаст файл app/locales/ru/translations.js - это словарь, в котором будет русский перевод:

$ ember generate locale ru

Перевод текста

1) Добавляю в словарь app/locales/ru/translations.js строку - "Contact":"Контакты",

export default {
  "Contact":"Контакт",
  ...
};

Открываю template.hbs и для слова "Contact" ставлю хелпер для перевода - {{t "Contact"}}

{{#link-to 'contact' tagName="li"}}<a href>{{t "Contact"}}</a>{{/link-to}}

2) Для использования хелпера перевода {{t }} внутри двойных фигурных скобок используется простые скобки, т.е.(t "contact"). Например, используется хелпер input и нужно сделать перевод текста в placeholder="Project name"

{{input type="text" value=model.project.name placeholder=(t "Project name")}}

и добавляю в словарь app/locales/ru/translations.js

export default {
  "Project name":"Название проекта",
  ...
};

3) Так же в хелпер {{t }} можно передать переменные. Например,
в темплейте:

{{t "The (model.user.name)'s project: '(model.project.name)'" username=model.user.name project=model.project.name}}

в translations.js

export default {
  "The (model.user.name)'s project: '(model.project.name)'": `Проект "{{project}}" пользователя {{username}}`
};

В translations.js для перевода использовались обратные кавычки, а "{{project}}" заключен в простые кавычки.

Ember datetime picker

ember-datetimepicker

Установить и использовать этот ember datetime picker очень просто.

Установка

$ cd ember-project

$ ember install ember-datetimepicker

Использование

На сайте проекта просто нет никакого описания по использованию ember-datetimepicker. Но посмотрев исходники проекта, я обнаружил в тестах пример использования 

https://github.com/kellyselden/ember-datetimepicker/blob/master/tests/dummy/app/

{{date-time-picker
  datetime
  options=options
  action=(action action)
}}
<span class="text">
  {{datetime}}
</span>

А вот как сделал я в темлейте своего приложения привязав к полю модели model.task.date:

{{date-time-picker model.task.date action=(action (mut model.task.date)) }}

Немного пояснений:

• date-time-picker - это хелпер ember-datetimepicker
• аргумент первый: model.task.date - если это значение установлено, то дата будет сразу показана
• аргумент второй: action=(action (mut model.task.date)) - присваивается дата, выбранная в пикере, в модель model.task.date

И это все, никаких обработок в route и controller делать не надо. Вот так вот, все проще некуда.