0

我正在尝试 Ember.JS，到目前为止，我很难将它与 Require.JS 一起使用，即使是一个（非常）基本的例子。

首先，我想说 Require.JS 应该（我认为）改进我在 Ember.JS 中看到的两个弱点：

  • 组织应用程序，尤其是在单独的 js 文件中
  • 不加载不必要的代码

我基本上是在尝试显示带有页眉/内容/页脚的应用程序。所以，当我创建我的应用程序时，我绑定了一个 ApplicationController 和一个 ApplicationView，并且视图处理模板。这在显示（很容易）页眉和页脚时效果很好。

然后，我正在尝试为索引渲染模板（例如），并且我想动态加载 IndexView/IndexController（例如）并将其与路由绑定。这就是我遇到困难的地方。

我找到了一个简单的方法，通过将 IndexView 直接设置为 App.IndexView，但是这个解决方案的问题是，如果我加载 IndexView，我也会加载索引模板文件内容（使用 text.js 插件）。这对我的示例来说没问题，但是因为我正在尝试构建一个复杂的网站，这意味着在加载网站时加载所有模板，这正是 Require.JS 试图避免的。

我在这里错在哪里？如何根据路由动态加载模板？

4

1 回答 1

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

这是我的关于视图：

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 回答