1

これが痛々しいほど明白な答えを持っていることをお詫びしますが、私はJSとEmber noobの両方であり、一般的なシナリオであると思うものの解決策を見つけるのに苦労しています。基本的に、html / css/jsフロントエンドと公開されたRESTAPIを備えたJavaバックエンドを備えたマルチページアプリがあります。すべての画面と複数のコントローラーに含めるapp.jsファイルが1つあり、そのうちのいくつかは個々の画面にのみ適用されます。

編集：私の質問を忘れました。私の質問は、コントローラーにオブザーバーが表示されるまで、ユーザーデータのサーバーへのクエリをどのように遅らせるかです。コントローラは複数の画面に存在するため（すべてが必要というわけではありません）、無駄になるため、オブジェクトの作成について盲目的にクエリを実行したくありません。今のところ、ページのインラインスクリプトタグの最後でpopulateメソッドを呼び出すというハッキーな方法があります。以下は私のコードが現在どのように見えるかです。

app.jsのセクション：

App = Ember.Application.create();

User = Ember.Object.extend({
    username: 'empty',
    fullname: 'empty user'
});

App.UserDataSource = Ember.Object.extend({

    fetchMyUser: function(callback) {
        $.get('ncaa/user', function(data) {
          callback(User.create({
                  username: data.username, 
                  fullname: data.fullname}));
        });
    }
});

App.userDataSource = App.UserDataSource.create();

App.UserController = Ember.Object.extend({

    content: null,

    populate: function() {
        var controller = this;
        this.get('dataSource').fetchMyUser(function(data) {
             controller.set('content', data);
        });
    }
});

App.userController = App.UserController.create({
     dataSourceBinding: Ember.Binding.oneWay('App.userDataSource')
});

Ember.run.sync();

index.htmlのセクション

<script type="text/x-handlebars">
      Welcome, {{App.userController.content.fullname}}
</script>

....other code....
<script type="text/javascript">

     $(document).ready(function() {
           ....other code....
           App.userController.populate();
     });
</script>

私の最初のステップは、Ember.Viewを拡張するためにそのハンドルバーテンプレートを変更することになると確信していますが、コミュニティがベストプラクティスであると信じていることを知りたいと思います。また、これらすべてを1つのapp.jsファイルに入れようとするのは間違っていますか？コントローラーをユーザーが表示する必要のある画面にのみインポートされた場合は、コントローラーの作成時にクエリを実行しても問題ありません。

4

1 に答える 1

0

私の質問に対する答えは、Ember.Viewにあることになりました。基本的に、私が行うことは、ビューのinit関数をオーバーライドして、必要なコントローラーにデータを取り込むための呼び出しを追加することです。ビューは、ハンドルバーテンプレートを介してインスタンス化されるため、不要な呼び出しやハッキーな回避策はありません。以下の重要な変更。

Index.html：

<script type="text/x-handlebars">
    {{#view App.UserNameView }} 
        Welcome, {{fullName}}
    {{/view}}
</script>

App.js：

App.UserNameView = Em.View.extend({
    init: function() {
          this._super();
          App.userController.populate();
    },
    fullNameBinding: 'App.userController.content.fullname',
    userNameBinding: 'App.userController.content.username'
});
于 2012-05-14T15:17:01.793 に答える