Passing arguments from node.js to knockout.js through ejs

Question

Passing arguments from node.js to knockout.js through ejs

I have a node.js that consumes mongodb data and outputs lists using knockout.js

When i invoke the view i pass a json structure using

res.render('list', { items:json });

In the list.ejs template page i've defined a hidden element:

<input type="hidden" id="hidden" value="<%= items %>">

and in .js file i read its value:

var json=$("#hidden").val();
var tkts=jQuery.parseJSON(json);
var vm=new AppViewModel(tkts);

Well...it runs but i think (hope) there must be a better way do it ... is there a way to avoid a hidden html var, for example?

node.js
knockout.js
ejs

Answer 1

Currently I can think of three ways to do this.

1.) Assign the data to a variable in your JavaScript code:

<script type="text/javascript">solution1 = {"name": "solution1"}</script>

solution1

2.) Add a data-attribute to an element of your liking:

<div id="solution2" data-value='{"name": "solution2"}'></div>

JSON.parse(document.getElementById('solution2').dataset.value)

3.) Use the script tag and choose a different content type than text/javascript or application/javascript

<script id="solution3" type="script" type="text/json">{"name": "solution3"}</script>

JSON.parse(document.getElementById('solution3').innerHTML)

Live demo

http://jsfiddle.net/bikeshedder/sbjud/

Personal note

It might sound boring, but the first option is probably the best choice. It is fast, requires as little code as possible and just works. I don't see a reason why you would want to have your data in a string first if you can have it as JavaScript data right away.

Answer 2

You could add an inline script if you are serving up a full page... Of course this would pollute the global namespace.

<script>
    var tkts = <%= items %>;
</script>

If you are using AJAX to get this page... then break it into two AJAX requests... one of them gets the template, and the other one can get the list of items (as a JSON request). They could run in parallel so it might even be quicker.