노드 JS + Express : 기본보기의 하위보기 렌더링

Question

"Google 카드"가 디자인 된 페이지가 있습니다. 이 메인 페이지의 카드에 대한 견해를 표현하고 싶습니다.

카드 인터페이스는 다음과 같습니다 : 많은 카드가 될 수

때문에, 나는 모듈에서 내 프로젝트를 조직했다.

은 (당신이 알고있는 경우 BTW, 프레임 워크 그게 당신이 내게 말할 수있는, 익스프레스보다 더 내 프로젝트에 맞는? :)) 내가 익스프레스 프레임 워크와 Node.js를 사용하고

.

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") 

다음

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

내 현재 코드의 일부입니다 : 내 디렉토리 구조는 이것이다

모듈/weather/index.js

var express = require('express'); 

var app = module.exports = express(); 

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

목적은 모듈/weather/index.js의 app.get ('/') 결과를 얻는 것과 같을 것 같지만 경로를 호출하지 않고 삽입 후 결과를 메인 보기,하지만 내 코드의 모듈성을 유지하는 방법을 모르겠다 ...

Answer 1

먼저, 귀하의 모듈에 메인 애플 리케이션을 전달, 2 개의 익스프레스 애플 리케이션을 만들지 말고, 당신은 나머지 경로를 사용하여 처리 할 수 ​​있습니다 .

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

클라이언트 옥 : 서버 측에

:

div#weather 

클라이언트 JS (

당신은 작은 API를 작성하고 사용해야합니다 AJAX는 기본보기를 채우기 위해 호출 jQuery 사용) :

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

Answer 2

2 명시 응용

을 생성하지 않는,

먼저, 모듈로 주요 애플 리케이션을 통과

을 @xShirase

지금까지 내가 아는 한, 노드 모듈 캐시, 의미, 때를 그 서브 파일에 빠른 표현이 필요하다면, 실제로는 app.js/server.js 메인과 똑같은 인스턴스를 얻게됩니다. 그래서 지나가는 앱은 아무 것도 개선하지 못한다.하지만 이모는 그것을 조금 못 생기게 만든다.