1

environments以下のコードは、を介してテンプレート内のデータにアクセスできるという点で、期待どおりに機能しますcontent.dev.name。

ただし、AJAXリクエストを介してこのデータを入力するのに苦労しています。

以下のコントローラーのような構造を返す REST API が 1 つあります。アプリのロード時に一度呼び出す必要があります。

ここに私の作業コードがあります:

コントローラ

App.EnvironmentsController = Ember.Controller.extend();
App.EnvironmentsController.reopenClass({
  find: function(){
    return {dev: {key: 'dev', name: 'Development'}, prod: {key: 'prod', name: 'Production'}};
    return this.content;
  },
});
App.EnvironmentsView = Ember.View.extend({
  templateName: 'environments'
});

ルート

...
router.get('applicationController').connectOutlet('environments', App.EnvironmentsController.find());
...

テンプレート

  <script type="text/x-handlebars" data-template-name="environments">
    <ul id="env-menu">
      {{#with content}}
        <li>{{dev.name}}</li>
        <li>{{prod.name}}</li>
      {{/with}}
    </ul>
  </script>

そして、これはAJAXを使用したコントローラーで、同じ形式のテンプレートにデータを渡すことができません。

注: response.data.environments 自体が、上記の手動でコーディングしたオブジェクトと同じ構造を返していることはわかっています。

App.EnvironmentsController = Ember.Controller.extend();
App.EnvironmentsController.reopenClass({
  environments: {},
  find: function(){
    $.ajax({
      url: 'http://localhost:3000/environments',
      dataType: 'json',
      context: this,
      success: function(response){
        this.environments = response.data.environments;
      }
    });
    return this.environments;
  },
});
App.EnvironmentsView = Ember.View.extend({
  templateName: 'environments'
});

コントローラーが配列コントローラーで、データが配列として返されていたときに、同様の作業があったことに注意してください。これをオブジェクトで具体的に機能させる方法を知る必要があります。

更新: 質問からの詳細情報

ここにフィドルがあります：http://jsfiddle.net/coder1/csvZX/

私は別のパターンにオープンです。オブジェクトをフェッチしてコントローラーを介して送信することに頭を悩ませようとしています。

これは非常に素晴らしいチュートリアルです ( http://trek.github.com/ ) 私が始めたもので、単一のオブジェクトで作業している場合ではなく、配列コントローラーでこれを機能させることができます。

4

2 に答える 2

4

jsfiddleを微調整したところ、データが正しく表示されるようになりました。

重要なのは、データがコントローラーではなくモデルによって処理されることです。元の jsfiddle を変更し、データ読み込み部分を、find()関数内でそれ自体のインスタンスを作成する責任があるクラスに分割しました。これは、Trek の例が機能するのと同じ方法です。

新しいモデル コード:

App.Environments = Ember.Object.extend({

});
App.Environments.reopenClass({
    find: function() {
        var env = App.Environments.create({});
        console.log("environments find()");
        // simulate an ajax call, hard coding response below
        setTimeout(function() {
            // Fake response
            console.log("fake ajax response");
            console.log(env);
            env.setProperties({
                dev: {
                    key: 'dev',
                    name: 'Development'
                },
                prod: {
                    key: 'prod',
                    name: 'Production'
                }
            });
            console.log(env);
        }, 1000);
        return env;
    }
});

Google への偽の ajax 呼び出しは機能しなかったので、切り替えて、setTimeout()呼び出しを使用して ajax 呼び出しの遅延をエミュレートしました。

find()このメソッドは新しいEnvironmentsオブジェクトを作成し、fake-ajax 呼び出しでそれにデータを入力することに 注意してください。コントローラーとテンプレートによってアクセスされる、find()新しく作成された空のオブジェクトをすぐに返します。EnvironmentsこのsetProperties()メソッドは、Ember のバインディング システムが変更を検出し、それらがテンプレートに反映されることを確認できるように、this のプロパティを更新するために使用されます。

connectOutlets他の唯一のことは、新しいEnvironmentsモデルを使用するように更新することです。

router.get('applicationController').connectOutlet('environments', App.Environments.find());

このコード行はfind()、新しく作成されたEnvironmentsオブジェクトを返し、それをコントローラーのインスタンスに渡し、ビューでテンプレートをEnvironmentsController埋めます。{{outlet}}applicationEnvironmentsView

動作中のjsfiddleの例を確認してください。

于 2013-01-02T21:17:09.343 に答える
1

私の観察では、あなたがしている可能性のある間違いは次のとおりです。

  1. this.environments = response.data.environments;set、addObjectまたは何か燃えさしの方法を使用する必要があります。

  2. テンプレートでも使用するenvironment代わりに変数を使用している場合。content

これがフィドルですhttp://jsfiddle.net/csvZX/17/

于 2013-01-02T19:06:21.143 に答える