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中有服务器代码，当jade文件准备好显示给用户时，它们会在html中呈现这些文件。像这样：

jade.renderFile('search.jade')

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

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

但是我对如何在节点路由中写这个很困惑。我是否只是放弃角度分割器功能？

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

请参阅此堆栈溢出帖子中所选答案的解决方案1，以获取我正在尝试做什么的参考：stack overflow post

我目前正在使用该帖子中的解决方案2.

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

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

然而，当我将jade更改为html时，我收到错误：错误：找不到模块＆＃39; html＆＃39;

views文件夹中的所有前端文件都有.jade扩展名，并以jade编写。

更新以下是我在一个名为index.js的文件中为index.jade（在views文件夹中）提供服务的方法：

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

嗯。由于您的代码看起来相对较小，我猜它的功能可能就是从视图中提供所有文件并实际“渲染”它们。所以可能你以后只是无法正确访问它们。也许你有一个类似/search.html或/search的网址（而不是/search.jade）。您可以尝试确认是否可以访问此类网址？

您的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然后将其返回给客户端的内容。由于拆分器需要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 - 如果您使用旧路线，一切都应该没问题。只需记住将分割器中的页面网址从search.jade更改为/user/search（或者无论网址是什么）。

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

1 个答案: