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>
Related
I am using react.js as the templating library in my node.js application . I am using jsx syntax for my react components. I have a route like /entities which renders the entities.jsx file (it is a view) . I have the following code in my entities.jsx file. I am trying to call the onclickhandler in my code and its not working.I am not rendering it explicitly using React.render but the component is showing in the browser when I hit localhost:/entities but the onclick handler isnt firing.
var MyComponent = React.createClass({
alertMessage: function() {
alert(this.props.name);
},
render: function () {
return (
<div onClick={this.alertMessage}>
Hello {this.props.name}
</div>
);
}
});
The examples that I have seen online render a jsx script embedded inside an html and a component rendered inside an html div tag but I am trying to use react.js in my node.js application. I dont want to render it inside an html tag but the component should render based on a url and should be dynamic
I have the following code snippet in my index.js file in my node application . I hit the view 'entities' through my index.js file that renders the view entities.
app.get('/entities', function(req, res) {
res.render('entities', {
title: 'Entities - Turkey Disclosure',
name: 'Entities',
selection: 'header-entities'
});
});
If I get you right you're using React.renderToString() to render react in node application. React doesn't insert onClick and other event statements directly to markup. If you want to keep those events you should call React.render() on a node that already has server-rendered markup. React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
There's a nice article explaining difference between three rendering methods in React.
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 get the idea of server and client side templating, but dust.js confuses me a little bit.
In order to use dust.js for client side templating, you need three steps:
complie the template
load the template
render the template
Right?
But where do the templates come from? I saw two different methods:
1. <script> template <script>
2. <div> template </div>
... Both of them are in the DOM. Which is correct?
I also notice that you can load the template via ajax, so the template won't be seen in the DOM, but I don't know how to do that.
Also, I'm currently using jade as express view engine. Is it necessary to switch to dust.js? What is the advantage?
This is LinkedIn Dust JS wiki page that can answer your questions and has very good examples: http://linkedin.github.com/dustjs/
But to answer your questions here:
Yes you need to compile your dust template which becomes a JavaScript file that you can add to your page by <script> tag and then call dust.render method to render your template. Here is an example:
write following code in a template file and save it as sample.tl
<p>Hi {firstName} {lastName}</p>
compile sample.tl to sample.js by dustc sample.tl in command line or use dust.compile("your_template_code", "template_name") to compile the template and save the output in a JavaScript file (sample.js) or you use duster.js to watch and compile templates by nodejs: https://github.com/dmix/dusterjs
add sample.js in your html:
<script type="text/javascript" src="sample.js"></script>
this will also register your template to dust.cache.
in your JavaScript:
var your_json = {firstName:'James', lastName:'Smith'};
dust.render('sample', your_json, function(err, out){
your_dom_element.innerHTML = out;
});
The result of above dust.render method will be <p>Hi James Smith</p>
So you need to pass 3 arguments to dust.render: dust.render(template_name, json, callback)
As the wiki say, you can use dust in the client or in the server. If you use it in the client you should get the template (for example with an ajax request), compile it an render in the browser. You will have to include the dust scripts file in your page.
By the other hand you can use dust in the server, (using rhino or nodejs). In this case you are going to compile and render the template in the server so the browser will receive html.
Is there any way to un-render a template with hogan.js. You can just hide it, but that leave's a lot of elements with id's and it can mess up further effects on your site.
I have looked around, but can't find an answer to this. Thanks
hogan.js is a templating language. What means that one can easly render different html markups just using some javascript object. It does not have the purpose of manipulating the DOM.
Lets say you got html like this:
<body>
...stuff...
<div id="div-1">...stuff...</div>
</body>
You could use of course jQuery:
$('#div-1').remove();
Or if it saves trouble you can use pure javascript:
var elem = document.getElementById('div-1');
elem.parentNode.removeChild(elem);
How I do use the loading_indicator.png provided in the design resources folder to make it act like an ajax loader?
This is how I display a loading indicator when starting my app, taken from the 'home' application (What's New). In your index.html:
<div class="loading">
<div class="throbber"><div></div></div>
</div>
In you app.css:
#import url("sp://import/css/eve.css");
adam.css being the dark Spotify theme and eve.css the light. Then, when your application is finished loading, just remove the element. You can do it with the dom methods in the spotify dom.js. In your app.js:
var dom = sp.require('sp://import/scripts/dom');
var loadingEl = dom.queryOne('.loading');
dom.destroy(loadingEl);
I don't know if the dom.js will be in the official API or not. Otherwise you can remove it any other way (standard dom methods, other js libraries you're using, etc):
var loadingEl = document.querySelector('.loading');
loadingEl.parentNode.removeChild(loadingEl);
Note that the above example does not necessarily use the loading_indicator.png but whatever images that are used by the adam.css and eve.css themes.
If you wan't to use the loader as a normal ajax loading indicator inside your app, then all the normal rules of web apps apply. Display loader when initiating ajax call, hide it in completed-callback, position it with css.
I realize this is an old topic, but with the 1.X API there is an easier way to do this by using the Throbber class which allows you to instantiate and hide fairly simply via JS.
var tracks = document.getElementById('tracks');
var throbber = Throbber.forElement(tracks);
// (wait for tracks to load and render)
throbber.hide();
Just make sure to include the Throbber class at the beginning of your JS:
require([
'$views/throbber#Throbber'
], function (Throbber) {