0

私はEmber.JSを試していますが、（かなり）基本的な例でも、これまでRequire.JSで使用するのに非常に苦労しています。

まず第一に、Require.JSは（私が思うに）Ember.JSに見られる2つの弱点を改善することになっていると言いたいです：

  • 特に個別のjsファイルでアプリを整理する
  • 不要なコードを読み込まない

基本的に、ヘッダー/コンテンツ/フッターを使用してアプリを表示しようとしています。したがって、アプリを作成するときは、ApplicationControllerとApplicationViewをバインドし、ビューがテンプレートを処理します。これは、ヘッダーとフッターを（非常に簡単に）表示するのに最適です。

次に、インデックスのテンプレートをレンダリングしようとしています（たとえば）。IndexView/ IndexController（たとえば）を動的にロードして、ルートにバインドしたいと思います。それは私が苦労しているところです。

IndexViewをApp.IndexViewとして直接設定することでこれを行う簡単な方法を見つけましたが、このソリューションの問題は、IndexViewをロードすると、（text.jsプラグインを使用して）インデックステンプレートファイルのコンテンツもロードすることです。私の例ではそれで問題ありませんが、複雑なWebサイトを構築しようとしているため、Webサイトをロードするときにすべてのテンプレートをロードすることになります。これは、Require.JSが避けようとしていたことです。

私はここでどこが間違っていますか？ルーティングに応じてテンプレートを動的にロードするにはどうすればよいですか？

4

1 に答える 1

1

編集：view.append（）を使用して挿入されるため、メインのhtmlドキュメントでプレースホルダーを宣言する必要はありません。

私は同じことに苦労してきましたが、ついにルーター、コントローラー、ビュー、テンプレートを分割して動的にロードする方法を思いつきました。

これは私のメインの「embermain.js」ファイルです。

window.MyRanks = Ember.Application.create();

MyRanks.Router.map(
    function() {
        this.route('about');
    }
);

MyRanks.AboutRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        require(['app/controller/AboutController'], function(controller) {
        });
    }
});

これが私のAboutControllerです：

require(
    ['app/view/AboutView'],
    function (view) {
        var controller = MyRanks.AboutController = Ember.Controller.extend({
        });
        return controller;
    });

これが私のAboutViewです：

define(
    ['text!app/templates/about.html'],
    function (template) {
        var view = Ember.View.create({
            template: Ember.Handlebars.compile(template),
            templateName: 'about',
            variable: 'my value',
            didInsertElement: function() {
                console.log( "Yes the view was included");
            }
        });
        view.append();
        return view;
    }
);

そしてここにテンプレートabout.htmlがあります

This is the template {{view.variable}}

それが役に立てば幸い！:)

于 2013-03-24T18:58:49.137 に答える