I have a database with user data, If I wanted to render a partial for each document in my MongoDB collection how would I do that?
I can render one partial by just adding it to my view but how do I make it render multiple ones automatically without me retyping this {{>somePartial}} for each new document added?
I looked around and found something suggesting AJAX they were not completely similar to my problem. If this is the solution is there another way other then AJAX?
every time a new document is added to MongoDB I'd like a new partial added to my view (I don't mind if it only shows when the page is refreshed)
{{>somePartial}} // Different data
{{>somePartial}} // Different data
{{>somePartial}} // Different data
You can make an array of all the data from your monogdb then you can render your page and pass your data to the ejs template and add dynamic includes and pass different data e.g.
<% for (let i = 1; i <= <length>; i++) { %>
<%- include("<partial>",{data:"your_data_for_this_index"}) %>
<% } %>
Related
I'm new to express JS and try to build CMS like this:
Users have a page builder, where they can drag-and-drop different components on the page.
each component has its own data which also is defined by a user
Each component has its own view template
So, I have to check what components have to load, prepare data for each of them, send this data to an appropriate template, render one big HTML and send to the client.
I know, It's too complicated to explain how to build this, but any tutorials, examples, resources would be appreciated.
IIUC, you can accomplish this using the include function that most template languages have. For the example, I'll use ejs. Also, I'm assuming you know how to get the data for user selections to your server.
on your app.js:
app.get('/someRoute', function(req, res) {
var data = //get user data here
res.render('someTemplate', {data:data});
});
someTemplate.ejs:
<%- include('header') %> //you should do this on every page
<% if (data == 'foo') { %>
<%- include('foo', {data:data}) %> //note that you can pass data to templates like this
<% } %>
<% if (data == 'bar') %>
<%- include('bar') %>
<% } %>
<% include('footer') %>
foo.ejs:
//some component here
If you want to read more, check the docs.
Hope this helps!
You can use Template Engine for that purpose because it enables you to use static template files in your application. At run time, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
Also check this link
I am rendering a view with the EJS template engine based on some dynamic variables. For example:
res.render("index", {
dynamicVariable: newEverytime
});
I am currently inserting it inside my HTML like so
<% if(someCondition){ %>
<div>
<%= dynamicVariable %>
</div>
<% } %>
I want EJS to create a new <a>tag every time as opposed to replacing my a tag each time. How can I achieve this?
EJS on the server side doesn't create any DOM nodes. It processes HTML source code as text. It just prints strings and it's the HTML parser on the client side that creates the DOM nodes from that.
I think you are asking about a strange solution to a problems that you say nothing about. It would b more useful to ask about the actual problems you're having, what have you tried so far and why it's not working.
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?
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.
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.
I am using ejs-locals to give me support for partials in express/node.js
The problem is the library has a bug when you include a partial within a partial. The 2nd partial include is trying to find the file relative to the grandparent or page.ejs that called the 1st partial.
So this requires I either flatten out my ./views so all files are only in ./views (no sub-dirs)...or I symlink to the partial from the directory that made the initial partial call.
Perhaps there is another/better way of doing this?
In a lot of my views, I have a face mash, that gives me html with people's avatars. I can't just use <% include faces %> and call it a day, because the collection of people comes from many different objects depending on the page from which it is called.
here's an example:
on an item page, I call <% include stats %>, which calls faces partial
<- partial('faces', { people: item.users }) %>
or on a list page, I call <% include stats %>, which calls faces partial
<- partial('faces' { people: list.users }) %>
The partial 'faces.ejs' just loops over people and spits out a link to their profile. But because I can't include a partial within a partial I'm stuck either sym-linking all over the place or trying something different.
./views/list/index.ejs calls a stats.ejs partial that calls faces.ejs partial...so I need to symlink ./views/list/faces.ejs to ./views/stats/faces.ejs for it to work.
You cannot pass data to a simple include, so I cannot pass in different collections of users depending on the context in which it was called.
<% include faces %> would require the face.ejs loop over either item.users or list.users hardcoded in faces.ejs
What else can I do that will work with nested partials/includes? I have filed a bug with ejs-locals, and a few others have as well, but its been a month w/o any fix.
I'm struggling to paginate using mongoid. I'm able to call paginate on my collection object like
#results = #collections.paginate :page => 1, :per_page => 10
but how it needs to be referred in view?
In my view I have rendered the collection in partial as
<%= render :collection => #collections, :partial => collect.xml %>
<%= will_paginate #results %>
In the above line I get the error undefined method total_pages for array.
But there is no error if I remove the will_paginate call in view and all the collections are shown in the view without pagination. Pls help.
I think I'm going wrong in calling the pagination helper in view. I have searched for quite a long time and did not find an example that included the pagination call in view for mongoid.
Forgive me if it is a dumb question. I'm new to mongoid.
This method call
#results = #collections.paginate :page => 1, :per_page => 10
will populate #results with an array of 10 items from #collections. You don't need to do use will_paginate at all, just use the #results object as is.
If you get problems with the view giving more than 10 results, debug the controller and the view to ensure there isn't something in between messing with your #results array.
EDIT:
Aha, so the problem is in displaying pagination links on the view. Yes, for that you would need the view to know things like the current page and the total number of pages available, so that you can compute how many links are necessary.
In return, your links would need to let the controller know what page is being requested, which you can achieve with GET request parameters. Helpers are probably the best way to keep the view clean.