使用 Onsen，如何在 NodeJs 中编写服务器端代码，将 Jade 文件呈现为拆分器中的 HTML

Question

在我的 Onsen 应用程序中，我有以下分离器。我正在使用 Jade，并通过在页面底部包含文件来呈现 html 中列表项中的所有其他页面（尽管它们位于单独的 jade 文件中），如下所示：

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

我认为这是一个肮脏的快捷方式，并且会在用户单击拆分器中的项目之前加载 search.jade 的内容（以及我包含的所有其他文件）。

我不想要这个功能。我想改为在 NodeJs 中使用服务器代码，当它们准备好显示给用户时，在 html 中呈现 jade 文件。像这样：

jade.renderFile('search.jade')

此 angular 代码目前是我从拆分器中的项目加载页面的方式：

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

但是我很困惑如何在节点路由中写这个。 angular 中的拆分器功能是否就此放弃？

任何人都可以帮助我澄清这一点并向我展示如何编写节点路由以在每次加载时将 jade 文件呈现为 html 的清晰示例吗？

请参阅此堆栈溢出 post 中所选答案的解决方案 1，以了解我到底想做什么：

我目前正在使用 post 中的解决方案 2。

我相信这是 server.js 中的相关代码：

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

然而，当我将 jade 更改为 html 时，我收到错误消息：错误：找不到模块 'html'

我在 views 文件夹中的所有前端文件都有 .jade 扩展名，并且是用 jade 编写的。

更新这是我在名为 index.js:

的文件中提供 index.jade（位于视图文件夹中）的方式

module.exports = function(app){

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

这是我的旧路由 NodeJS 路由，由于拆分器而不再使用：

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

Answer 1

嗯。由于您的代码看起来相对较小，我猜它所做的可能只是从视图中为您的所有文件提供服务，实际上 "rendering" 它们。因此，您以后可能无法正确访问它们。也许您有一个 url，例如 /search.html 或 /search（而不是 /search.jade）。您能否尝试确认您是否可以访问这样的url？

您的 index.jade 文件是否以其他方式提供，例如 startingPoint: 'index.jade' 或类似的方式，或者它是否也位于 views 文件夹中？

基本上只要您的索引文件与您的其他视图具有相同的处理方式，那么一切都应该没问题。

更新：通过您刚刚提供的内容，我们可以了解您为索引提供服务的方式。

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

相当于你之前说的完全一样：

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

这里 res.render 是将您的翡翠转换成 html 然后 returns 给客户。由于拆分器需要 html，这意味着您在开始使用它时不应该对服务器进行更改。

流程如下：

       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 - 如果您使用旧路线，一切都应该没问题。请记住将拆分器中的页面 url 从 search.jade 更改为 /user/search（或者 url 的任何内容）。

使用 Onsen，如何在 NodeJs 中编写服务器端代码，将 Jade 文件呈现为拆分器中的 HTML

Using Onsen, how to write server side code in NodeJs that will render Jade files as HTML in a splitter

html

node.js

onsen-ui

pug