ボタンを押すときのテキストフィールドからのバインディング値

StackOverflow https://stackoverflow.com/questions/8857017

  •  28-10-2019
  •  | 
  •  

質問


Ember.jsで作業するために次の例（以下を参照）があります。テキストフィールドに何かを入力してEnterを押す限り、すべてがうまく機能します。しかし、ボタンを押したときに同じ結果を得るにはどうすればよいですか？ボタンをクリックすると、テキストフィールドの値をバインドするにはどうすればよいですか？ビューで作業していますか？
前もって感謝します！

<script type="text/x-handlebars">
  {{view App.TextField}}
  {{#view Ember.Button target="App.peopleController" action="addPerson"}}
    Add Person
  {{/view}}
  <ul id='todo-list'>
  {{#each App.peopleController }}
    <li>{{name}}</li>
  {{/each}}
  </ul>
</script>
<script>
  App = Em.Application.create();

  App.peopleController = Em.ArrayController.create({
    content: [{name: "Tom"}, {name: "Mike"}],

    addPerson: function(name) {
      this.unshiftObject(App.Person.create({name: name}));
    }
  });

  App.Person = Em.Object.extend({
    name: null
  });       

  App.TextField = Em.TextField.extend({
    insertNewline: function() {
      App.peopleController.addPerson(this.get("value"));
      this.set("value", "");
    }
  });
</script>
役に立ちましたか？

解決

これは実際には達成するのが少し難しいですが、JSFiddleであなたの例を作り直しました。 http://jsfiddle.net/ebryn/vdmra/

私はあなたのビューサブクラスのコントローラーへのハードコード参照に対してアドバイスします。そうすれば、他の場所でビューコンポーネントを再利用することはできません。

他のヒント

Emberボタンのコードでは、予想される名前のパラメーターを与えることなく、AddPerson関数を呼び出すだけだと思います。入力フィールドの値をAddPerson関数に渡すために、そのボタンの個別のビューを書く必要がある場合があります。

App.MyButton = Em.Button.extend({
  click: function(){
    var value = App.TextField.get('value')
    // etc

  }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top