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}}

希望它有所帮助！：）

Ember.JS + Require.JS - 根据路线渲染特定视图

1 个答案: