Как я могу привязать атрибуты data- для помощника input в текущих версиях Ember?

DEBUG: -------------------------------
DEBUG: Ember             : 2.2.0
DEBUG: Ember Data        : 2.2.1
DEBUG: jQuery            : 1.11.3
DEBUG: Ember Simple Auth : 1.0.0
DEBUG: -------------------------------

Это мой помощник, но атрибуты data- опущены ...

{{input id="price-slider" name="title" type="text" value=model.price data-slider-id="ex1Slider" data-slider-min=model.minPrice data-slider-max=model.maxPrice data-slider-step=model.priceStep data-slider-value=model.price}}
2
blueFast 4 Янв 2016 в 17:40

2 ответа

Лучший ответ

По умолчанию атрибуты данных не распространяются. Вы можете повторно открыть компонент TextField для распространения всех необходимых атрибутов данных, однако отметьте этот раздел официальных руководств.

В качестве альтернативы, если вы хотите, чтобы все атрибуты данных были автоматически унаследованы, вы можете повторно открыть или создать подкласс компонента TextField, чтобы он распространял все атрибуты данных по умолчанию:

Ember.TextField.extend({
  init: function() {
    this._super();
    var self = this;

    Object.keys(this).forEach(function(key) {
      if (key.substr(0, 5) === 'data-') {
        self.get('attributeBindings').pushObject(key);
      }
    });
  }
});
1
Ju Liu 4 Янв 2016 в 14:57

Вы можете использовать обычные скобки, чтобы просто продемонстрировать, что привязки работают twiddle (не уверен, но атрибуты данных не должны быть потерялся с ними) в вашем шаблоне

<input onkeyup={{action 'inputChange' value='target.value'}}>
<input value={{inputVal}}>

В вашем контроллере

export default Ember.Controller.extend({
  inputVal: 'hello',
  actions: {
    inputChange(val) {
      this.set('inputVal', val);
    }
  }
});

Кстати, если вам нужна функциональность слайдера, посмотрите emberx-slider, ember-range-slider

1
Bek 4 Янв 2016 в 15:51