2

複数のチャットウィンドウを管理する必要がある残り火アプリケーションがあります。アクティブなチャットごとにウィンドウが{{#each}}ループ内に作成されます。これは十分に簡単です。私が問題を抱えているのは、ユーザーがEnterキーを押したときにチャットメッセージを送信することです。

窓はこんな感じ

{{#each chats}}
    ... stuff to display already existing chats...
    {{view Ember.TextField valueBinding="text" action="sendChat"}}
    <button {{action sendChat this}}> Send </button>
{{/each}}

ボタンを渡すことができるので、これはボタンに対して正常に機能しますthis。デフォルトでは、テキストフィールドビューアクションで定義された関数は、そのテキストフィールド内のテキストを取得するだけですが、この場合は十分ではありません。複数のチャットウィンドウが開いている可能性があるため、メッセージが入力されたウィンドウを知る必要があります。thisテキストフィールドアクション関数に渡すことは可能ですか？（または、この問題を解決するための別の方法を提案できますか？）

4

2 に答える 2

3

contentBinding="this"次のように、ビューの定義に追加します。

{{view Ember.TextField valueBinding="text" action=sendChat contentBinding="this"}}

編集

Emberマスターにはすでにこの変更がありますが、公式のダウンロード可能なバージョンにはまだありません。したがって、必要な機能を実現するには、をサブクラス化しEmber.TextFieldて変更する必要があります。insertNewline

App.ActionTextField = Em.TextField.extend({
    insertNewline: function(event) {
        var controller = this.get('controller'),
        action = this.get('action');

        if (action) {
            controller.send(action, this.get('value'), this);

            if (!this.get('bubbles')) {
                event.stopPropagation();
            }
        }
    }
});

その後、アクションハンドラーは追加の引数、ビューを受け取ります。

{{view App.ActionTextField valueBinding="text" action=sendChat myfieldBinding="this"}}

およびコントローラー内：

sendChat: function (text, view) {
    var myField = view.get('myfield');
    //do stuff with my field
}

サブクラス化の代わりに残り火マスターを使用することができますEmber.TextField。

残り火の連中がすぐに次のバージョンをリリースすることを願っています。

于 2013-02-06T21:04:31.423 に答える
2

私はこの質問が答えられたことを知っていますが、アクションとTextFieldの状況で誰かを助けるかもしれないいくつかの情報を追加させてくださいと言いました。一言「コンポーネント」。TextFieldEmberはそうなComponentので、その観点から考えると、TextFieldアクションの送信やアプリケーションでのTextFieldの使用に関して役立つ場合があります。

つまり、App.SomeTextField = Ember.TexField.extend({...});App.SomeTextFieldがEmber.TextFieldをサブクラス化していると言うとき（どちらがコンポーネントであるかを思い出してください）。内部にロジックを追加すると、それが機能し、{{viewApp.SomeTextField}}などのテンプレートからアクセスできます。

あなたは私がこの男が吸う「ビュー」という言葉を見ると思っているかもしれません、それTextFieldはビューです。EmberコンポーネントはEmber.Viewのサブクラスであり、ビューが持つすべてのものを備えているため、これは一種のビューです。ただし、ビューとは異なり、コンポーネントは周囲のコンテキスト（情報/データ）を吸収しないため、すべてをロックアウトするため、周囲のコンテキストの外部から何かを送信する場合は、明示的に行う必要があります。

したがって、テンプレート内のテンプレートに物を渡すには、2つの値、この場合はアクションを渡すApp.SomeTextFieldようなことを行います。{{view App.SomeTextField value=foo action="sendChat"}}ビュー/コンポーネント間の微妙な境界線に少し乗ることができるかもしれませんが、物事がクラッシュするのはなぜあなたのアクションが送信されないのですか？

今、これは物事が少しトリッピーになるところです。TextFieldビューからサブクラス化されたコンポーネントですが、ビューはコンポーネントではないことを忘れないでください。あなたがやろうとしているとき、コンポーネントはそれ自身のカプセル化された要素であるためthis.get('controller').send('someAction', someParam)、「これ」はコンポーネント自体を指し、コントローラーはこのコードに関して再びコンポーネント自体を指します。期待しているアクションは、周囲のコンテキストの外側に移動しますが、アプリケーションは移動しません。

これを修正するには、コンポーネントからアクションを送信するためのプロトコルに従う必要があります。それは次のようなものになります

 App.SomeTextField = Ember.TextField.extend({
    //this will fire when enter is pressed
    insertNewline: function() {
      //this is how you send actions from components
      //we passed sendChat action in
      //Your logic......then send...
      this.sendAction('sendChat');
    }

 });

これで、SomeTextFieldコンポーネント/ビュー要素がどこにあるかに関連付けられているコントローラーで実行します

 App.SomeController = Ember.Controller.extend({
   //In actions hash capture action sent from SomeTextField component/view element
   actions: {
     sendChat: function() {
       //Your logic well go here...
     }
   }
 });

ここで、TextFieldをコンポーネントと考えると言いましたが、ビューの末尾に乗って{{viewAppSomeTextField...}}を宣言しています。コンポーネントのようにしましょう。

だからあなたはそれを使いたい場所をあなたのテンプレートに持っているでしょう

//テンプレート内

 `{{some-text-field}}`

次に、次の名前のコンポーネントの特定のテンプレートを取得します。

//コンポーネントに関連付けられたテンプレート

 <script type="text/x-handlebars" data-template-name="components/some-text-field">
     Add what you want
 </script>

JSでコンポーネントを宣言します。

 //important word 'Component' must be at end 
 App.SomeTextFieldComponent = Ember.TextField.extend({
    //same stuff as above example
 });

私たちが役割を担っているので、Ember入力ヘルパーを使用して同じ機能を取得できる可能性があります。彼らはかなり強力です。

 {{input action="sendChat" onEvent="enter"}}

うまくいけば、この情報が、私のアクションがこのtextFieldから送信されないのはなぜか疑問に思っている人に役立つでしょう。

このjsBinは、アクションなどを送信するコンポーネント/ビュー用のサンドボックスです。

http://emberjs.jsbin.com/suwaqobo/3/

平和、これから離れて...

于 2014-03-15T01:36:18.267 に答える