Ember.JS + Require.JS - отображение конкретного вида в зависимости от маршрута

Question

Я пробую Ember.JS, и мне пока очень трудно использовать его с Require.JS, даже с (довольно) базовым примером.

Прежде всего, я хотел бы сказать, что Require.JS должен (я думаю) улучшить два слабых места, которые я вижу в Ember.JS:

• Организация приложения, особенно в отдельных файлах JS
• Не загружается ненужный код

Я в основном пытаюсь отобразить приложение с заголовком / контентом / нижним колонтитулом. Поэтому, когда я создаю свое приложение, я связываю ApplicationController и ApplicationView, а представление обрабатывает шаблон. Это прекрасно работает при отображении (довольно легко) верхнего и нижнего колонтитула.

Затем я пытаюсь отобразить шаблон для индекса (например), и я хотел бы динамически загрузить IndexView / IndexController (например) и связать его с маршрутом. Вот где мне тяжело.

Я нашел простой способ сделать это, настроив IndexView напрямую как App.IndexView, но проблема с этим решением заключается в том, что если я загружаю IndexView, я также загружаю содержимое файла шаблона индекса (используя плагин text.js). Это было бы хорошо для моего примера, НО, поскольку я пытаюсь создать сложный веб-сайт, это означало бы загрузку всех шаблонов при загрузке веб-сайта, чего и требовал Require.JS.

Где я тут не прав? Как мне динамически загрузить шаблон в зависимости от маршрутизации?

Answer 1

РЕДАКТИРОВАТЬ: На самом деле не нужно объявлять заполнитель в основном HTML-документе, поскольку он внедряется с помощью view.append().

Я боролся с одной и той же вещью и, наконец, нашел способ разделить маршрутизатор, контроллер, представления и шаблоны, загружая их динамически.

Это мой основной файл "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}}

Надеюсь, поможет!:)