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')
}))
Related
I have a project where the prod machine specs are low so I'm trying something new and trying Gulp to compile everything into one compressed js file.
I have a config.json that's being used by main.js. What does my gulpfile.js has to look like in order to turn those two files into one js file?
You may declare a variable in JS to contain the JSON data as per following example
var arr = [
{
data1: 'mydata01',
data2: 'mydata02',
},
{
data3: 'mydata03',
data4: 'mydata04',
}
]
But this defeats the spirit and purpose of JSON which is primarily for exchanging of Data between two entities (two webpages, client-server, webpage-database, etc). This technique will make the data hardcoded in the JS with lesser flexibility to change the data dynamically.
I need to get all files from some require stack and this include all requires inside the required too.
Example:
file.js
require("./b");
require("./c");
//require("./d"); // this is a comment, need to prevent that
AST
[{
path: "absolute_dir/b.js",
name: "7saf7fs6asf7" // hash
},
...]
ouput (with the AST i can get all files by his name and put them in one single file, like a bundler)
require("7saf7fs6asf7");
require("sa8d78as8d7f");
I don't know how to do this in a modular logic. PLZ help me :)
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'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(..);
}
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);
});