Поля ввода Ember.js

Question

Можно ли использовать стандартные поля ввода HTML5 в представлении Ember.js или вы вынуждены использовать ограниченный выбор встроенных полей, таких как Ember.TextField, Ember.CheckBox, Ember.TextArea и Ember.select? Я не могу понять, как связать входные значения с представлениями без использования встроенных представлений, таких как:

Input: {{view Ember.TextField valueBinding="objectValue" }}

В частности, мне нужно числовое поле. Какие-либо предложения?

Answer 1

РЕДАКТИРОВАТЬ: Это сейчас устарело, вы можете достичь всего выше с помощью следующего:

{{input value=objectValue type="number" min="2"}}

---

Устаревший ответ

Вы можете просто указать тип для TextField

Input: {{view Ember.TextField valueBinding="objectValue" type="number"}}

Если вы хотите получить доступ к дополнительным атрибутам числового поля, вы можете просто создать подкласс Ember.TextField,

App.NumberField = Ember.TextField.extend({
  type: 'number',
  attributeBindings: ['min', 'max', 'step']
})

Input: {{view App.NumberField valueBinding="objectValue" min="1"}}

Answer 2

Вот мой хорошо напечатанный взгляд на это:

    App.NumberField = Ember.TextField.extend({
        type: 'number',
        attributeBindings: ['min', 'max', 'step'],
        numericValue: function (key, v) {
            if (arguments.length === 1)
                return parseFloat(this.get('value'));
            else
                this.set('value', v !== undefined ? v+'' : '');
        }.property('value')
    });

Я использую это так:

{{view App.NumberField type="number" numericValueBinding="prop" min="0.0" max="1.0" step="0.01" }}

Другие системы, где распространяются строки в числовые поля.

Answer 3

Ответ @Bradley Priest выше верен, добавление type=number работает. Однако я обнаружил, что вам нужно добавить некоторые атрибуты в объект Ember.TextField, если вам требуется ввод десятичных чисел или вы хотите указать минимальные / максимальные значения ввода. Я просто расширил Ember.TextField, чтобы добавить некоторые атрибуты в поле:

//Add a number field
App.NumberField = Ember.TextField.extend({
    attributeBindings: ['name', 'min', 'max', 'step']
});

В шаблоне:

{{view App.NumberField type="number" valueBinding="view.myValue" min="0.0" max="1.0" step="0.01" }}

эт вуаль!

Answer 4

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

App.NumberField = App.TextField.extend({
  type: 'number',
  attributeBindings: ['min', 'max', 'step'],
  numbericValue : function (key,v) {
    if (arguments.length === 1)
      return parseFloat(this.get('value'));
    else
      this.set('value', v !== undefined ? v+'' : '');
  }.property('value'),
  didInsertElement: function() {
    this.$().keypress(function(key) {
      if((key.charCode!=46)&&(key.charCode!=45)&&(key.charCode < 48 || key.charCode > 57)) return false;
    })  
  }
})

Кредит, где он должен: я продлил ответ Нрайно

Answer 5

Вот как я бы сделал это сейчас (в настоящее время Ember 1.6-beta5), используя компоненты (используя идеи @nraynaud & @nont):

App.NumberFieldComponent = Ember.TextField.extend
  tagName: "input"
  type: "number"

  numericValue: ((key, value) ->
    if arguments.length is 1
      parseFloat @get "value"
    else
      @set "value", (if value isnt undefined then "#{value}" else "")
  ).property "value"

  didInsertElement: ->
    @$().keypress (key) ->
      false  if (key.charCode isnt 46) and (key.charCode isnt 45) and (key.charCode < 48 or key.charCode > 57)

Затем, чтобы включить его в шаблон:

number-field numericValue=someProperty