Node JS + Express：在主視圖中呈現子視圖

我有一個「Google Card」設計的頁面。我想在這個主頁的卡片上呈現一些視圖。Node JS + Express：在主視圖中呈現子視圖

該卡接口看起來是這樣的： enter image description here

因爲可能有很多卡，我組織了我模塊項目。

（順便說一句，如果你知道這就是框架更適合我的項目不是快遞呢，你可以告訴它給我嗎？:)）

我使用Node.js的與快遞框架。我的目錄結構是這樣的：

|-app 
|--modules 
|---weather 
|---index.js 
|----views 
|-----weather.jade 
|--views 
|--config.js 
|--server.js 
|-public 
|--assets 
|---img 
|---css 
|---...

下面是我的一些當前的代碼：

server.js：

var express = require('express'); 

var app = express(); 
app.use("/public", express.static(__dirname + '/../public')); 
app.set('view engine', 'jade'); 

Board = {}; 

Board.modules = {}; 
Board.modules.weather = require('./modules/weather'); 

app.use(Board.modules.sticks); 

app.get('/', function(req,res){ 
    tpl = {}; 
    tpl.modules = Board.modules; 
    console.log(tpl); 
    res.render(__dirname + '/views/board.jade', tpl); 
}); 

app.listen(8080);

board.jade（主頁）

doctype html 
html(lang="fr") 
    head 
    meta(charset="utf-8") 
    title Board 
    block stylesheets 
     link(rel="stylesheet", href="/public/assets/css/reset.css") 
     link(rel="stylesheet", href="/public/assets/css/board.css") 
    body 
    // Background 
    div.bg 

    // Header 
    header.topinfo 
     span.left.ip 
     | 192.168.31.11 
     span.center.logo 
     span.logo 
      span.logo-baseline 
     span.right.time 
     | 13:37 

     // Modules 
     ul 
     each val in modules 
      li= val 

    block scripts 
     script(src="/public/assets/bower_components/jquery/dist/jquery.min.js") 
     script(src="/public/assets/lib/jquery-taphold/taphold.js") 
     script(src="/public/assets/lib/background-check/background-check.min.js") 
     script(src="/public/assets/bower_components/masonry/dist/masonry.pkgd.min.js") 
     script(src="/public/assets/js/app.js")

和模塊/ weather/index.js

var express = require('express'); 

var app = module.exports = express(); 

app.get('/', function(req,res){ 
    res.render(__dirname + '/views/sticks.jade'); 
});

我認爲其目的就像獲取modules/weather/index.js的app.get（'/'）的結果，但不調用路由，在將渲染結果插入main查看，但我不知道該怎麼做，保持我的代碼的模塊化...

來源

2014-10-05 maxime

你已經定義了2個app.get（'/'），所以它可能會發生衝突。你爲什麼不嘗試：'app.get（'/'） - > res.render（'/ index.jade'）; 'index.jade'中的app.get（'/ weather'） - > res.render（'/ sticks.jade'）'和有js腳本調用ajax'$ get（{url：'/ weather'}） '並填寫數據到一個類，如'

' – Kai 2014-10-05 02:00:03

首先，將您的主應用程序傳遞到您的模塊，不要創建2個快速應用程序，您可以使用路線。

你應該創建一個很小的API，並使用AJAX調用來填補你的主要觀點：

在服務器端：

app.get('/weather', function(req,res){ 
    res.render(__dirname + '/views/sticks.jade'); 
});

客戶端玉：

div#weather

客戶端JS（使用jQuery）：

$.ajax({ url: '/weather', 
    type: 'get', 
    success: function(view) { 
     $('#weather').html(view); 
    } 
});

來源

2014-10-05 02:34:29 xShirase

我甚至沒有想過AJAX ...！非常感謝xShirase和Jh Kaiz！ – maxime 2014-10-05 11:46:31

但是，您的意思是「不要創建2個快速應用程序」，您有代碼示例嗎？ – maxime 2014-10-05 11:51:41

基本上，上面的代碼取代你的modules/weather/index.js。通過在主應用程序中定義/天氣路線，您不需要在天氣目錄中創建另一個路線 – xShirase 2014-10-05 12:23:26

@xShirase

首先，你的主應用程序傳遞給你的模塊，不會造成2個明示應用

據我所知，在節點模塊被緩存，這意味着，當你需要在子文件中表達，你實際上獲得了與主app.js/server.js中完全相同的實例。所以傳遞應用程序並沒有改善任何東西，但是imo使它變得有點醜陋。

來源

2014-12-01 11:29:48 jalooc

Node JS + Express：在主視圖中呈現子視圖

回答

相關問題