2

私は現在、作業中のプロジェクトでEmber.jsを使用しています。エラーがないため、すべてが機能しているように見えますが、これが間違っていると感じたため、コードをリファクタリングしようとしています。

Emberアプリケーションのコアセットアップには、ヘッダーとメインセクションに多数のテンプレートを使用できるようにする次のコードがあります。ビューを接続するためのアウトレットを含むメインセクション：

App.ApplicationView = Em.ContainerView.extend({
    childViews: [ 'headerView', 'mainView' ],
    headerView: Ember.View.create({
        tagName: 'header',
        ariaRole: 'banner',
        templateName: 'header'
    }),
    mainView: Em.ContainerView.create({
        elementId: 'wrapper',
        childViews: [ 'outletView' ],
        outletView: Ember.View.create({
            template: Ember.Handlebars.compile( '{{outlet}}' ),
        })
    })
});

次に、ビューを設定します。この投稿の目的のために削除されました-これはかなり自明であるため、ユーザーモデルは含まれていません（userNameはテスト目的で設定されています）：

App.LoginView = Ember.View.extend({
    templateName: 'log-in',
    tagName: 'section',
    ariaRole: 'main'
});

App.LoginViewController = Ember.ObjectController.extend({
        content: App.User.create({ 'userName' : 'ben' })
});

次に、ルーターがあります。

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('login');
            }
        })
    })
});

そして私の見解：

<script type="text/x-handlebars" data-template-name="log-in">
    <h1>Sign In</h1>
    <p>Sign in using the form below.</p>
    <form id="log-in">
        {{view Ember.TextField valueBinding="userName" name="UserName" id="UserName" type="email" placeholder="your.name@domain.com" required="required" }}
        {{view Ember.TextField valueBinding="userPassword" name="UserPassword" id="UserPassword" type="password" required="required" }}
        <input type="submit" value="Sign In" />
    </form>
</script>

私の主な問題はコントローラーに関するものです。Ember.jsで読んでいることから、これはすべてを設定する方法ですが、上記のコードを使用すると、valueBindingsが機能しません。

私の知る限り、インデックスルートはloginViewControllerではなくapplicationControllerを使用しているためです。したがって、コントローラーをこれに変更すると、次のようになります。

App.ApplicationController = Ember.ObjectController.extend({
    user: App.User.create({ 'userName': 'ben' })
});

その後、正常に参照することでビュー内のオブジェクトにアクセスできますuser.userNameが、確かにすべてのビューで同じコントローラーを使用する必要があります。これは私には正しくないようです。確かに、各ビューは独自のコントローラーを使用する必要がありますか？

applicationControllerではなくloginViewControllerに接続するようにルーターを変更すると、loginViewに{{outlet}}パラメーターが含まれていないため、アプリケーションが機能しなくなります。

router.get('loginViewController').connectOutlet('login');

私は何かが足りないのですか？これを完璧にしようとして、私は壁を駆け上がっています。

4

1 に答える 1

1

これは命名規則の問題です。コントローラの名前をLoginViewControllerではなくLoginControllerに変更してみてください。

内部的には、connectOutlet（'login'）はApp名前空間でLoginViewクラスとLoginControllerクラスを検索します。コントローラが見つからない場合は、ビューを接続するだけです。したがって、ご使用のバージョンでは、LoginViewは接続されていましたが、LoginViewControllerは無視されました。その後、LoginViewはApplicationControllerのコンテキストでレンダリングしていました。そのため、ユーザープロパティをそこに配置しようとすると機能しました。

また、ベストプラクティスは、connectOutletsコールバック内からコントローラーコンテンツを設定することです。これは機能するはずです：

App.LoginView = Ember.View.extend({
    templateName: 'log-in',
    tagName: 'section',
    ariaRole: 'main'
});

App.LoginController = Ember.ObjectController.extend({});
App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
        route: '/',
        connectOutlets: function (router, context) {
            user = App.User.create({ 'userName' : 'ben' })
            router.get('applicationController').connectOutlet('login', user);
        }
    })
  })
});
于 2013-01-04T16:26:27.787 に答える