Mit Onsen, wie man serverseitigen Code in NodeJs schreibt, die Jade-Dateien als HTML in einem Splitter rendern wird

Question

In meiner Onsen App habe ich den folgenden Splitter. Ich bin mit Jade und Rendering alle anderen Seiten aus den Listenelementen in HTML (trotz der Tatsache, dass sie in getrennten Jade-Dateien sind), indem Sie die Dateien am unteren Rand der Seite, einschließlich, wie unten dargestellt:

body(ng-controller='...') 
    ons-splitter(var='mySplitter') 
     ons-splitter-side(var='menu' side='left' width='220px' collapse swipeable) 
     ons-page 
      ons-list 
      ons-list-item(ng-click="root.load('home.jade')", tappable='') 
      | Home 
      ons-list-item(ng-click="root.load('search.jade')", tappable='') 
      | Search 
      ... more list items 

    ons-template(id='home.jade') 
     ons-page(ng-controller='...') 
     ons-toolbar 
     .left 
      ons-toolbar-button(ng-click='mySplitter.left.open()') 
      ons-icon(icon='md-menu') 
     .center 
      | My App 

     //- google maps stuff 
     ons-input#pac-input.controls(type='text', placeholder='Search Box') 
     div#map.col-md-12 

     ons-bottom-toolbar 
      .center 
      | MyApp 

    include search.jade 

Ich glaube, das ist eine schmutzige Abkürzung, und wird den Inhalt von search.jade laden (sowie jede andere Datei, die ich einschließe), bevor der Benutzer sogar auf das Element im Splitter klickt.

Ich möchte diese Funktionalität nicht. Ich möchte stattdessen Server-Code in NodeJs haben, der die Jade-Dateien in HTML rendert, wenn sie bereit sind, dem Benutzer angezeigt zu werden. Etwas wie folgt aus:

jade.renderFile('search.jade') 

Dieser Winkel Code ist zur Zeit, wie ich die Seite aus dem Artikel in dem Splitter bin Laden:

mySplitter.content.load(page) 
    .then(function() { 
    $scope.pop = page; 
    mySplitter.left.close(); 
}); 

Allerdings bin ich sehr verwirrt darüber, wie diese in einem Knoten Route zu schreiben . Verlasse ich die Splitterfunktion einfach in eckig?

Kann mir jemand helfen, dies für mich klarzustellen und mir ein klares Beispiel zu zeigen, wie man die Knotenroute schreibt, um die Jade-Dateien jedes Mal, wenn sie geladen werden, als HTML darzustellen?

Bitte siehe Lösung 1 von der gewählten Antwort von diesem Stapelüberlauf Beitrag für eine Referenz, was genau ich zu tun versucht: stack overflow post

Ich bin derzeit mit Lösung 2 von dieser Stelle.

Ich glaube, das der entsprechende Code in server.js ist:

app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 

Allerdings, wenn ich Jade zu html zu ändern, erhalte ich die Fehlermeldung: Fehler: nicht finden Modul 'html'

All Meine Frontend-Dateien im Views-Ordner haben .jade-Erweiterungen und sind in Jade geschrieben.

aktualisiert Hier ist, wie ich index.jade in einer Datei namens index.js (die in den Ansichten Ordnern) diene:

module.exports = function(app){ 

    /* Get home page. */ 
    app.get('/', function(req, res, next) { 
    res.render('index', { title: 'My App' }); 
    }); 
} 

Dies war meine alte Route NodeJS Route, die wird nicht mehr wegen der Splitter verwendet:

// get user search page 
    app.get('/user/search', function(req, res, next) { 
     return res.render('searchForTrainer'); 
    }); 

Answer 1

Hmm. Da Ihr Code relativ klein erscheint, würde ich annehmen, dass er nur alle Ihre Dateien aus Ansichten bereitstellt und sie tatsächlich "rendert". Sie werden wahrscheinlich später nicht richtig darauf zugreifen können. Vielleicht haben Sie eine URL wie /search.html oder /search (anstelle von /search.jade). Können Sie versuchen, zu bestätigen, ob Sie auf eine solche URL zugreifen können?

Auch ist Ihre index.jade Datei auf andere Weise bedient wie startingPoint: 'index.jade' oder etwas ähnliches, oder ist es auch im views Ordner?

Grundsätzlich, solange Ihre Indexdatei die gleiche Behandlung wie Ihre anderen Ansichten hat, sollte alles in Ordnung sein.

Aktualisieren: Mit dem, was Sie gerade zur Verfügung gestellt haben, können wir sehen, wie Sie Ihren Index bedienen.

app.get('/', function(req, res, next) { 
    res.render('index', { title: 'Fitness App' }); 
}); 

Das Äquivalent das ist genau das gleiche wie das, was Sie sagten, Sie zuvor:

app.get('/user/search', function(req, res, next) { 
    return res.render('searchForTrainer'); 
}); 

Hier res.render ist, was Ihr Jade in HTML umwandelt und dann kehrt es an den Client. Da der Splitter HTML erwartet, sollten Sie keine Änderungen am Server vorgenommen haben, als Sie damit begonnen haben.

Hier ist, wie der Prozess wie folgt aussieht:

 Client   |  HTTP   |  Server 
         |      | 
content.load('page') →  GET /page  ↘ 
         |      | res.render('page') // convert jade to html 
    html is loaded  ← 200 OK html content ↙ 
in splitter.content |      | 

TL; DR - wenn Sie Ihre alte Route alles verwenden sollte in Ordnung sein. Denken Sie daran, die Seiten-URL im Splitter von search.jade zu /user/search (oder wie auch immer die URL lautet) zu ändern.