Ember.JS + Require.JS - 根據路線呈現特定視圖

我正在嘗試使用Ember.JS，並且我的真的很難對付到目前爲止使用Require.JS，即使使用（漂亮）的基本例子。Ember.JS + Require.JS - 根據路線呈現特定視圖

首先，我想說Require.JS應該（我認爲）提高兩個方面的缺陷我看到Ember.JS：

組織的應用，尤其是在單獨的js文件
沒有加載不必要的代碼

基本上，我試圖顯示與頁眉/內容/頁腳的應用程序。所以，當我創建我的應用程序時，我綁定了一個ApplicationController和一個ApplicationView，並且該視圖處理了該模板。這很好地顯示（很容易）的頁眉和頁腳。

然後，我想呈現的指數（例如）一個模板，我想動態負載IndexView /索引控制器（例如），並與路由綁定。這是我度過艱難時刻的地方。

我發現了一個簡單的方法來做到這一點，通過將IndexView直接設置爲App.IndexView，但這個解決方案的問題是，如果我加載IndexView，我也加載索引模板文件內容（使用text.js插件）。這對我的例子來說可以，但是因爲我試圖構建一個複雜的網站，這意味着在加載網站時加載所有模板，這正是Require.JS試圖避免的。

我在哪裏錯了？如何根據路由動態加載模板？

來源

2013-02-01 Benjamin Netter

你看過本機[Ember路由器]（http://emberjs.com/guides/routing/）。它似乎會完全解決你的問題？ – Deif

編輯：因爲它是使用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; 
    } 
);

這裏是template about.html

This is the template {{view.variable}}

希望它有幫助！ :)

來源

2013-03-24 18:58:49

嘿，謝謝你的回答！實際上，當我在#emberjs上問同樣的問題時，我實際上已經學會了RequireJS是EmberJS的一個不好的練習，主要是因爲一個大文件比許多異步調用要好。 –

現在這是有道理的，我使用yeoman，它的預設grunt構建任務最終將它們混合到一個醜陋的大js文件中，這使得我所有的努力都變得毫無用處。但另一方面，並不是我不喜歡它，這絕對不是我的情況，但如果它是一個巨大的應用程序，會導致一個重量爲幾兆字節的單個js文件，那會是最好的方法嗎？ –

我以爲是一樣的，但最終我的文件或多或少是40ko，所以我認爲可能在真的非常罕見的情況下使用RequireJS可能會有用，但大多數時候不是。 –

Ember.JS + Require.JS - 根據路線呈現特定視圖

回答

相關問題