I've been working with pug/jade a little bit and now I'm trying to build the same project using handlebars.
I have this iteration that renders a few options:
<select id="myselect" name="myselect">
{{#each categories}}
<option value="{{id}}">{{title}}</option>
{{/each}}
</select>
A bit further down the code I need to render some items dynamically based on the selected item from myselect.
Any idea how I can grab it dynamically? Basically the same way like onchange() works in plain javascript.
When you use any kind of tempting engine (handlebars, jade, ejs, etc). You cannot bind data after the response sent to the client. You have to write some client side javascript code to achieve that.
As an alternative you can use handlebarjs on client side. Follow this link
But this may need to be used carefully, since you are using the same template engine on your server side.
Related
Let's suppose I have a frontend application, let's just use Vue as an example, that has a Text component which takes in a prop text which it renders out on route /my-page:
<template>
<div>{{ props.text }}</div>
</template>
Now I would like to create a corresponding backend that lets me change this text. What I thought would be cool, is if I was to go to a certain route, e.g. /backend/my-page that looked exactly like /my-page in the frontend (i.e. it pulls in my-page as a component), but allowed configurability of the text and whatever.
What I thought about doing was to extend my text component and basically check whether I am in the backend (by looking at the route) and then render out a CK5Editor to be able to change the text. This text would be sent to the database, then in turn be rendered out in the frontend:
<template>
<editor v-if="route.startsWith('/backend')" />
<div v-else>{{ props.text }}</div>
</template>
While I suppose this approach would work, I am wondering whether this would be the right way to do it, or whether instead to separate these two components into one and if so how to do that.
I very much new to Node JS and Express Framework & mongodb. I am working on a website which has multiple categories and when we click on category it goes to a view, where based on the category clicked, data gets loaded in the view.
please check the link for website here.
I am looking help for navbar links eg. Montessori Premium->Toddler Material
As these are static links I can not figure how to pass any parameter or url format for this.
I have done the routing for individual products as they have ids coming from database so I am using that id in url.
Thanks in advance.
It seems to me like you're just missing a bit of glue in between the front-end and the back-end database calls. Here's a rough idea of the sequence you might be after and an explanation of what I think you're missing.
If I'm wrong, please add a comment and update your question to include the new details and I'll see about editing my answer.
In this example I'm creating a website which has a list of "items" in a shop and we're looking to display them all on a single page. Each item should then have an a href clicking through to that specific item where there might be more detail such as a "full description" of the item and maybe some images or something. We're going to look at the flow to build that first page with the list of items.
The user makes a HTTP GET call to the root of your website such as "http://www.mystore.com/".
This request comes through in Express to your controller which takes the req, res, next parameters.
Your controller makes a call to the database to get a list of all items including their names and ID's.
You then use something called templating to inject in the list of items.
In this template you iterate through the list doing something like this.
.
<ul>
{{#each items}}
<li><a href="/items/{{id}}>{{name}}</a></li>
{{/each}}
</ul>
In this template (which happens to be Handlebars), we're going through the list of items and using the id and name of each to inject them into the HTML to get something a bit like this back.
<ul>
<li><a href="/items/1>Shoes</a></li>
<li><a href="/items/2>Red spotted dress</a></li>
<li><a href="/items/3>Jeans</a></li>
</ul>
This is then served up to the user once the template has been processed.
In essence I think you're after some sort of templating engine, I'd highly recommend having a look at Handlebars with something like the express-hbs.
Thank you #Elliot for your time to answer this. Yes I am using handlebars for templating. The solution I found is, because I am using static links, I am passing query string in anchor tag link.
eg. http://localhost:8000/product?category=Toddler_Material
and then using req.query for capturing the values (Toddler_Material) in router
var category = req.query.category;
I'm developing an app using angularjs with nodejs and dustjs.
What i'm trying to achieve is like during the page refresh pass the data like
res.render('index', {names : [{name:"name1"},{name:"name2"}]});
and dustjs should able to render
{#names}<li>{name}</li>{/names}
how can i use angular js ngrepeat for subsequent actions in the page.
As of now i'm making a http request get the json and render page fully in client side.
<li ng-repeat="myname in mynames>{{myname.name}}</li>
I don't prefer to save my data as JavaScript variable, which is readable through source.
Just want know if somebody done something like this.
I done it in a hackish way to implement this, not a suitable solution.
I used ng-if of angularjs to do this
var mynames = [{name:"One"},{name:"Two"}]
<div ng-if="!mydata">
{#mynames }
<div>{name}</div>
{/mynames }
</div>
<div ng-if="mydata">
<div ng-repeat="myname in mynames">[[myname.mynames]]</div>
</div>
i'm using square brackets for angularjs as there was some conflict with dustjs which was fixed using below code
angular.module('myapp').config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
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'm using Ember.js and Handlebars.js for a project I'm working on at the moment. Server-side is Node.js + express and I make use of the Jade templating engine.
Now, whenever I want to tie actions to DOM elements, I use the {{action}} attribute of Ember.js. Currently, this is how my code looks in Jade:
script(type='text/x-handlebars', data-template-name='frontpage')
div.logo(''='{{action goToFrontpage}}')
The above does work, however, the ''='{{action goToFrontpage}}' part seems somewhat hackish.
Is there any other way of doing this? Perhaps a best-practice when combining Ember.js, Handlebars.js, and Jade?
Sometimes it's better to just use html in Jade.
<div {{action GoToFrontpage}} class="logo"></div>
An other example I see a lot is the strong tag.
.stuff
| This is an
strong important
| message.
You can write this
.stuff This is an <strong>important</strong> message.
I find the second a lot more readable and concise.