62855

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

Question:

In my Onsen app I have the following splitter. I am using Jade, and rendering all the other pages from the list items in html (despite the fact that they are in separate jade files) by including the files at the bottom of the page, as shown below:

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

I believe this is a dirty shortcut, and will load the contents of search.jade (as well as every other file I include) before the user even clicks the item in the splitter.

I do not want this functionality. I would like to instead have server code in NodeJs that renders the jade files in html when they are ready to be displayed to the user. Something like this:

jade.renderFile('search.jade')

This angular code is currently how I am loading the page from the item in the splitter:

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

However I am very confused about how to write this in a node route. Do I just abandon the splitter function in angular?

Can anyone help clarify this for me and show me a clear example of how to write the node route to render the jade files as html each time they are loaded?

Please see solution 1 of the selected answer from this stack overflow post for a reference of what exactly I am trying to do: <a href="https://stackoverflow.com/questions/38249590/onsenui-loads-page-in-text-via-a-splitter" rel="nofollow">stack overflow post</a>

I am currently using solution 2 from that post.

I believe this is the relevant code in server.js:

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

However when I change jade to html, I receive the error: Error: Cannot find module 'html'

All my front-end files in the views folder have .jade extensions and are written in jade.

<strong><em>Update</em></strong> Here is how I am serving index.jade (which is in the views folder) in a file called index.js:

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

This was my old route NodeJS route which is no longer being used because of the splitter:

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

Answer1:

Hmm. Since your code seems relatively small I would guess that what it does may be just serving all your files from views and actually "rendering" them. So probably you are just failing to access them properly later on. Maybe you have a url like /search.html or /search (instead of /search.jade). Could you try to confirm whether you can access such a url?

Also is your index.jade file served in some other way like startingPoint: 'index.jade' or something similar or is it also located in the views folder?

Basically as long as your index file has the same treatment as your other views then everything should be fine.

<strong>Update</strong>: With what you just provided we can see the way in which you are serving your index.

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

The equivalent of that is exactly the same as what you said you had before:

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

Here res.render is what converts your jade into html and then returns it to the client. Since the splitter is expecting html that means you shouldn't have made changes to the server when you started using it.

Here is how the process looks like:

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

<strong>TL;DR</strong> - if you use your old route everything should be fine. Just remember to change the page url in the splitter from search.jade to /user/search (or whatever the url for will be).

Recommend

  • What's wrong with my search that doesn't display their marker in google map?
  • 100% height child div in parent wrap div
  • Excel VBA Cutting rows from workbook1 and paste it in workbook2
  • SQLite UWP Error with Mobile EMulator Windows 10
  • Compare a column between 2 csv files and write differences using Python
  • ActionBar with appcompat library v7 (ava.lang.IllegalStateException: You need to use a Theme.AppComp
  • href inside href [duplicate]
  • angularjs - ng-show doesn't update class when $interval triggers
  • docker-compose: connection refused between containers, but service accessible from host
  • Yii2: Using Kartik Depdrop Widget?
  • How to Add Polymorphic Comments to Feed?
  • Xaml, wpf image position and crop issue
  • Android Database Error - getWriteableDatabase
  • Getting different value with placeholder over CPU/GPU
  • How can I tell a form not to dispose a particular control when it closes?
  • WPF version of .ScaleControl?
  • Overlapping controls in Windows XP
  • IE7 and TinyMCE with Plone
  • gspread or such: help me get cell coordinates (not value)
  • Ajax calls do not work in IE unless you fiddle with security settings
  • Keep this build forever option - Jenkins
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • script to move all files from one location to another location
  • MySQL WHERE-condition in procedure ignored
  • How to show dropdown in excel using jrxml (jasper api)?
  • Web-crawler for facebook in python
  • align graphs with different xlab
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Running Map reduces the dimensions of the matrices
  • Binding checkboxes to object values in AngularJs
  • Android Heatmap on canvas or ImageView
  • java string with new operator and a literal