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(']]');
});
Related
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.
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 am using your dc js in node js for rendering dc chart via server but i am facing many problems.
First I found all result of the svg in variable, but i want to know how to render chart in web browser.
When i write that SVG tags to file like "index.html" trying to run that file to browser, Chart is displayed but filter is not wroking
How we can use dc.js with node.js in browser?
I have tried many ways to get result, but i am not successed. If you have any tutorial or any guid Please let me know
I have not experimented with using dc.js on the server side with node, but you should be able to write the svg tag into an html document.
For example, if you browse the DOM of a live site like http://dc-js.github.io/dc.js/ in the DOM, using the Elements tab of Chrome's Developer Tools, you'll see something like this:
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
<a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
<svg width="990" height="250"><g>
...
Note: I don't think you can get the interactive features of dc.js using it this way.
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 trying to learn the jade template system and backbone.js in the context of a (relatively simple) node.js webapp. I'm using express.js as my framework. Anyway, backbone.js looks really interesting and powerful, but I don't want to render my clients on the client side.
I'd rather render server-side with node and jade, send the client the rendered page, and just modify live content using backbone. What's the best way to go about this? In other words, what's the best way to use backbone with a page that's already rendered and structured? I realize that I'm not leveraging backbone to it's full power, but I'm pretty much just trying to use backbone rather than a bunch of jQuery selectors and event handlers.
Your backbone view can reference an existing DOM element by passing a reference to the element as el when instantiating the view.
var myViewInstance = new MyViewClass({el: $('#existingDOMElement')});
Any event handlers you have declared in your view class will be bound to any child elements matching the event selectors. Ex:
<html>
<body>
<div id='myView'>
<a class='foo'>Foo</a>
</div>
<script>
var MyViewClass = Backbone.View.extend({
events: {
'click .foo': 'fooClicked'
},
fooClicked: function(e) {
e.preventDefault();
console.log('.foo clicked');
}
});
new MyViewClass({el: $('#myView')});
</script>
</body>
</html>