I've been trying to put together a really simple example using Dust.js in the Browser. Although the docs are very good there doesn't seem to be much information on getting things configured in the for browser.
So based on the following JSON data taken from the Linked-In Dust tutorial:
https://github.com/linkedin/dustjs/wiki/Dust-Tutorial#wiki-Show_me_some_Dust
{
"title": "Famous People",
"names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
}
And this template:
{title}
<ul>
{#names}
<li>{name}</li>{~n}
{/names}
</ul>
How can this be sent up for rendering client side in the browser?
I was looking for a browser example of DustJS too since the tutorials don't really mention it.
Here's a repo I created with an example:
https://github.com/ericktai/dust-js-browser
I use duster.js to compile the template. The repo's README.md should describe the basics.
Hope it helps!
Erick
A little bit down on the page you will find a basic example how to compile a template:
Compiling a Dust Template
Basically you just have to call the compile function to register the template.
var compiled = dust.compile("Hello {name}!", "intro");
To use it immediately, execute loadSource to write the compiled template into dust's template library:
dust.loadSource(compiled);
Then you're able to render the template with your JSON-data:
dust.render("intro", {name: "Fred"}, function(err, out) {
console.log(out);
// or maybe with jquery:
$('#container').html(out);
});
Related
I'm in the process to create my first Node-RED contribution. The node will clean an incoming object based on a sample object provided in the editor. I'm using the RED.editor and the RED.library.
I'm wondering if I need to declare a dependency in my package file. Currently it looks like this:
{
"name" : "node-red-contrib-objectcleaner",
"version" : "0.0.1",
"description" : "Removes properties from incoming (payload) object, that are not in a template object",
"dependencies": { /*Do I need anything here? */
},
"keywords": [ "node-red", "validation", "flow" ],
"node-red" : {
"nodes": {
"objectcleaner": "objectcleaner/objectcleaner.js"
}
}
}
What, if anything, goes into the dependencies? I know I will put node.js dependencies there, but do I need to list the editor/library?
You'll probably do better asking questions like this on the mailing list here:
https://groups.google.com/forum/#!forum/node-red
You shouldn't need to list Node-RED in the dependencies as this will just pull in another copy into the node_modules tree.
You should be fine just using the reference to RED object that is passed in when the node is initialised
I've read and re-read the jade references and a whole bunch of stack overflow questions but I can't seem to figure this out and I think it should be really simple.
So all I want to do is have an object in a JavaScript file, and have that imported into my jade file so I can use the data from the object when generating my html page.
for example:
This would be in a JS file:
var obj = {
firstName: "bob",
lastName: "smith",
age: 109
};
And in my jade I want to do this:
h1 #{obj.firstName}, #{obj.lastName}
h2= obj.age
etc.
This is just a simple example. Any help at all would be much appreciated.
I would simply create the object in my jade but I want the object to be formatted where each item is on its own line (for readability), and jade doesn't currently support that.
On that link someone mentioned a solution that I did not understand at all: "so I accomplished what I wanted by passing in the array in grunt-contrib-jade instead of putting it directly in the template. Also allowed me to get rid of grunt-sed"
I am using codekit to compile my jade into static html, not Node.JS.
This can be accomplished if you translate your object to JSON format.
From the docs on command line arguments:
-O, --obj <path|str> JavaScript options object or JSON file containing it
Example:
user.json
{
"firstName": "bob",
"lastName": "smith",
"age": 109
}
And you would compile your template like that:
$ jade myTemplate.jade --obj user.json
or if you're using Gulp with gulp-jade:
.pipe(jade({
locals: require('user.json')
}))
I'd like to use grunt-contrib-concat for application frontend HTML templating purposes and this would be useful for me.
I'd like to define page partials and and concatenate them inside an output file that is going to be compiled by handlebars.
I've got everything set up, however Concat doesn't allow me to use the same file more than once.
Basically concat is filtering the sources so they don't occur more than once. The second partial1.hbs will not be concatenated.
pageconcat: {
src: [
'app/templates/partial1.hbs',
'app/templates/partial2.hbs',
'app/templates/partial1.hbs'
],
dest: 'app/result.hbs'
}
Is there any way to do this?
Update 1
After playing around with grunt's console output function, I was able to debug (of some sort) the concat plugin. Here's what I found out: The input array is deduplicated by grunt for some reason.
Update 2
The deduplication occurs in the foreach file loop that grunt uses. I've managed to bypass that (see answer). I do not know how reliable my solution is but it's a workaround and it works well if you don't put the wrong input.
You may be able to use the file array format to set up two different source sets. Something like this:
{
"files": [{
"src": [
"app/templates/partial1.hbs",
"app/templates/partial2.hbs"
],
"dest": "app/result.hbs"
}, {
"src": [
"app/result.hbs",
"app/templates/partial1.hbs"
],
"dest": "app/result.hbs"
}]
}
added "app/result.hbs" to second source set, as was pointed out in the comments.
Thanks.
Solution
After some debugging I came up with a solution. Certainly not the best, but it works fine, as it should.
I edited the concat.js plugin file inside the node_modules folder the following way:
grunt.registerMultiTask('concat', ...){
var self = this;
//several lines of code
//...
//replace f.src.filter(..) wtih
self.data.src.filter(..);
}
Can anyone give me any pointers/examples on how to use your own custom helpers with grunt-static-handlebars? I've read the documentation and can't see how to do this.
I created helpers to use when using handlebars client side and I'd love to be able to replicate that on the serverside when building pages but currently can't work out how to do that.
I tried to create the fullName helper from the handlebars docs. I set my helpersPath to /helpers and created a fullName.js with this code
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});
Then I added it to the base.json config file
{
...
"helpers": [
"fullName"
],
...
}
And then attempt to use it in a partial {{fullName person}}
But when I attempt to run the grunt task I getting an error. Fatal error: Object #<Object> has no method 'call'
Any ideas where I'm going wrong?
You can try out grunt-handlebars-to-static, which have a example project available solving your exact problem. Also the task is highly flexible for all different kinds of folder arrangement. The docs gives two examples of most typical folder arrangement as starters.
Disclaimer: I am the author :) Cheers.
I just recently started learning dojo for personnal use and for experience. So far, I have been doing the tutorials on various dojo stuff (on their website and over the web) and I have been "struggling" with implementing a concrete infrastructure for more complex application (or good practice). I have find one interesting project (https://github.com/csnover/dojo-boilerplate) and article (http://www.sitepen.com/blog/2011/05/04/what-is-the-best-way-to-start-a-dojo-project/). With that, I think my first problem is resolved. Correct me, if I'm wrong.
I feel like the tutorial on i18n is missing concrete implementation. For example, I would like to add i18n on the dialog box from the boilerplate project.
define([ 'dojo/_base/declare', 'dijit/Dialog' ], function (declare, Dialog) {
return declare(Dialog, {
title: 'Hello World',
content: 'Loaded successfully!'
});
});
Here, My project hierarchy is:
AS you can see, I create my own nls folder for my application and store for different (lang-locale) my "strings". Now, how do I specify the locale content on title or content for my dialog code above. I have done recently i18n on ruby on rails (with the concept of MVC) and depending on my view I had to create for this specific view a file for localization (.yml). I know that RoR and Dojo are really not the same thing, but does a widget (could be compared to my view) and so each widget needs to have their own localization... I have come accross 2 tutorials, first and second. Maybe, I'm reading it all wrong.
I have something like this right now, but it doesn't work.. What am I missing?
dojo.requireLocalization("app", "dialog");
define([ 'dojo/_base/declare', 'dijit/i18n' 'dijit/Dialog' ], function (declare, Dialog) {
i18n: dojo.i18n.getLocalization("app", "dialog"),
return declare(Dialog, {
title: i18n.title,
content: i18n.content
});
});
Thank you.
EDIT:
define([ 'dojo/_base/declare', 'dojo/i18n!app/nls/labels', 'dijit/Dialog' ], function (declare, labels, Dialog) {
return declare(Dialog, {
title: labels.title,
content: labels.content
});
});
I have no error now, but my labels.title is empty...?
EDIT(1): I forgot to add the root on the default nls folder.
Here's an example of how I have built some dialogs with localization.
directory structure
myApp\
dialog\
myDialog.js
nls\
dialog.js
fr-ca\
dialog.js
myDialog.js
define("myApp/dialog/myDialog", [
"dojo", "dijit/Dialog", "dojo/i18n",
"dojo/i18n!./nls/dialog" // this is a relative path to the
// dialog.js from myDialog.js
], function(dojo, Dialog) {
var i18n = dojo.i18n.getLocalization(
"myApp.dialog", // this is the directory path to the nls folder
"dialog" // this is the file
);
return declare(Dialog, {
title: i18n.title,
content: i18n.content
});
});