4

Ember.jsビューで標準のHTML5入力フィールドを使用することは可能ですか、それともEmber.TextField、Ember.CheckBox、Ember.TextArea、Ember.selectなどの組み込みフィールドの限定された選択を使用することを余儀なくされていますか？次のような組み込みのビューを使用せずに、入力値をビューにバインドする方法を理解できないようです。

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

具体的には、数値フィールドが必要です。助言がありますか？

4

5 に答える 5

22

編集：これは今では時代遅れであり、以下で上記のすべてを達成することができます：

{{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"}}
于 2013-01-22T03:06:06.813 に答える
4

上記の@BradleyPriestの答えは正しいですが、type=numberを追加しても機能します。ただし、10進数の入力が必要な場合、または最小/最大入力値を指定する場合は、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" }}

et voile！

于 2013-01-22T15:20:02.653 に答える
4

これが私のよくタイプされたテイクです：

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

文字列を数値型フィールドに伝播する他のシステム。

于 2013-06-23T02:36:33.623 に答える
1

また、人々がそこに古い文字を入力できないようにすることもできます。

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

正当なクレジット：nraynaudの回答を拡張しました

于 2013-12-05T20:58:49.610 に答える
1

これは、コンポーネントを使用して（@ nraynaud＆@ nontのアイデアを使用して）これを今（現在はEmber 1.6-beta5）行う方法です。

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
于 2014-06-01T08:58:03.777 に答える