Question

如何在当前版本的Ember中绑定data-助手的input属性？

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

Answer 1

默认情况下，不传播数据属性。您可以重新打开TextField组件以传播所需的所有数据属性，请查看官方指南的this section。

或者，如果您希望自动继承所有数据属性，则可以重新打开或子类化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);
      }
    });
  }
});

Answer 2

你可以使用常规括号输入只是证明绑定工作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);
    }
  }
});

btw如果你想要滑块功能，请查看emberx-slider，ember-range-slider

在输入助手中绑定数据属性

2 个答案: