0

独自の Ember.View 実装を使用したいのですが、残念ながら valueBinding が機能しません (組み込みのもので機能します)。

App.NumberView = Ember.View.extend({
  tagName: 'input',

  attributeBindings: ['type', 'min', 'max', 'step', 'value', 'placeholder'],

  type: 'number',
  step: '0.01',
  min: '0',
  max: null,
  placeholder: null,
  value: ''
});

テンプレートでは:

{{view App.NumberView id="value" valueBinding="value" placeholder="39.90"}}
<button type="button" {{action submit}}>submit</button>

コントローラーで:

App.SomeController = Ember.Controller.extend({
  submit: function() {
    // returns undefined
    this.get('value');
  }
});

valueBinding をサポートするために自分の NumberView に欠けているものは何ですか?

ボードー

4

2 に答える 2

1

を拡張する代わりにEmber.View、 を直接拡張することをお勧めしますEmber.TextField。

例えば：

App.NumberView = Ember.TextField.extend({
  attributeBindings: ['type', 'min', 'max', 'step', 'value', 'placeholder'],
  type: 'number',
  step: '0.01',
  min: '0',
  max: null,
  placeholder: null,
  value: ''
});

動作中のjsbinについては、こちらを参照してください。

それが役に立てば幸い。

于 2013-06-22T17:47:24.057 に答える
1

ネイティブに動作するようにしました。ここにはいくつか問題があります。コントローラーで使用するthis.get('value');と、コントローラー自体に存在しない属性「値」が検索され、未定義になるため、機能しませんでした。また、'value' は Ember ビューの予約済みプロパティであるため、入力の値プロパティとして扱うことはできません。

あなたがしなければならないことはvalueBinding、ビューをコントローラーのカスタム属性/プロパティに設定することです。これにより、ビューの値がコントローラーにバインドされます (ビューの入力の値ではありません)。実際の html 入力の値をバインドするには、手動で変更を反映し、ビューの値を設定する必要があります。このコードチャンクの後で説明します。

HTML HBS :

{{view App.NumberView valueBinding="cValue" placeholder="39.90"}}

Javascript :

App.NumberView = Ember.View.extend({
  didInsertElement: function(){
    this.change = $.proxy(this._change, this);
  },
  tagName: 'input',

  attributeBindings: ['type', 'min', 'max', 'step',  'placeholder'],

  type: 'number',
  step: '0.01',
  min: '0',
  max: null,
  value: null,

  _change: function(){
    this.set('value',this.$('input').get('context').value);

    console.log('View input value is --> ' + this.$('input').get('context').value);
  }  
});

App.IndexController = Ember.Controller.extend({
  cValue: null,
  submit: function() {
    alert(this.get('cValue'));
  }
});

したがって、基本的に、Controller には cValue というプロパティがあり、これは NumberView のにバインドされていvalueます。NumberView では、didInsertElement() 関数を使用して、独自の関数呼び出し_change()を入力の変更イベントにアタッチしました。では_change()、NumberView の値を入力の現在の値に設定および更新します。

ここに作業中のJSBinがあります

于 2013-10-28T16:48:09.140 に答える