I want to redo my blog but my code below seems to be returning [function] whenever I console.log it. Yes it is the correct path, and it used to work before I updated jade but not anymore.
post.stub = jade.compile(
fs.readFileSync(__dirname + '/blog/' + p + '/stub.jade')
)
How do I fix this so that console.log(post.stub) will return my :markdown present in the jade file instead of [function] ?
Thanks in advance.
Updated answer:
post.stub = jade.compile(
fs.readFileSync(__dirname + '/blog/' + p + '/stub.jade')
)({})
This is how jade and all similar template systems work. There are 2 steps:
Convert a jade text template into a function (only needs to happen once per template)
Take a set of context data, run it through the compiled template function, and return the rendered string as HTML (happens every time you have unique context data)
So if your template doesn't need any context data, just invoke it with an empty object (probably null/undefined would also work fine):
post.stub = jade.compile(
fs.readFileSync(__dirname + '/blog/' + p + '/stub.jade')
)({})
See also the jade javascript API docs.
Related
I am using jade template to generate a html email, so I need to retrieve the html content by compiling the jade template. However I would need to pass in variable into the email content, so I have the following codes:
users.js:
var fn = jade.compileFile(__dirname + '/../templates/welcomeEmailTemplate.jade');
var html = fn({base_link:'http://something/'});
and then the welcomEmailTemplate.jade looks like:
img(src= !{base_link} + "image.jpg")
but this gives the error of:
Unexpected token }
on the above line in jade template file.
What should be the correct way to pass in variable in jade.compileFile?
Thanks!
You're mixing up two different syntax. You need to do either this:
img(src=base_link + "image.jpg")
or this
img(src="#{base_link}image.jpg")
I cant get exif data from displayed image address
by click on photo You should see the exif data.
var someCallback = function(e) {
$('#cameraModel').val(e.Model);
$('#aperture').val(e.FNumber);
$('#created').val(e.DateTime);
$('#taken').val(e.DateTimeOriginal);
$('#copyright').val(e.Copyright);
$('#description').val(e.ImageDescription);
$('#artist').val(e.Artist);
$('#latitude').val(e.GPSLatitude[2]);
$('#longitude').val(e.GPSLongitude[2]);
//Uncomment the line below to examine the
//EXIF object in console to read other values
//console.log(e);
}
$('#fdd').on('click', function (e) {
alert($(this).attr("src"));
$(this).fileExif(someCallback);
});
please help... jsfiddle
From the fiddle, you're trying to use the fileExif method from https://github.com/sanisoft/jQuery-fileExif. You have several problems here:
You did not load the library in your fiddle (hence I had to guess which library you tried to use. Hint: read the console log, a message like Uncaught TypeError: Object [object Object] has no method 'fileExif' means you're missing code or trying the call on the wrong object)
That library cannot be loaded into a fiddle because it uses document.write. You can remove this code from the plugin to get it to work in a fiddle; it's only needed for IE:
document.write(
"<script type='text/vbscript'>\r\n"
+ "Function IEBinary_getByteAt(strBinary, iOffset)\r\n"
+ " IEBinary_getByteAt = AscB(MidB(strBinary,iOffset+1,1))\r\n"
+ "End Function\r\n"
+ "Function IEBinary_getLength(strBinary)\r\n"
+ " IEBinary_getLength = LenB(strBinary)\r\n"
+ "End Function\r\n"
+ "</script>\r\n"
);
You are using the wrong library. That one is for file uploads, not image elements. You should try using the original jquery exif plugin, here: http://www.nihilogic.dk/labs/exifjquery/
I have to update for example a table, a list if some values. I can insert new values and try to reload a entire page to show table or list values again.
If I give a try on Ajax updates I have to manipulate DOM, creating a bunch of new tags, concatenate and inject the new HTML on old one. This not a painful way, you even must re-type the code created before to exhibit new entries.
E.g: this is a fictitious example and illustrates what I mean:
$.ajax({
url: '/post/addComment/',
type: 'POST',
data: 'comment=' + comment,
beforeSend : function() {
//waiting message
$('#some_information_div').html('<strong>Updating...</strong>');
}
}).done(function(data) {
//new data comes here (by JSON, plain text, whatever...)
if (data.status == 'OK') {
//OHHH MAN WE HAVE TO POPULATE MANUALLY IT AGAIN
var c = '';
c = '<table>'
data.content.forEach(function(e) {
c += '<tr><td>' + e.name + '</td></tr>';
});
c += '</table>'
//update with new values
$('#some_information_div').html('');
$('#destination_table').html(c);
}
});
Unfortunately I have to do all the time with my lists and tables and somehow I have to re-type codes and manipulate it all by the javascript. I figured out something might be useful like does jQuery.load(), maybe it can fit what I want to, I have not tried it.
Some other languages and frameworks like JSF do it easily with "render technique", you directly update content without have to create and manipulate DOM in manually way.
Please, any kind of suggestion, any clue to this approach will be very helpful.
P.S.: The code sample tag doesn't work well here.
This can be done by using .load() jquery function. I have illustrated for some page 1.php and some table having id mytable
$('table#mytable').load('./1.php #mytable');
for constant refreshing --
setInterval(function() {
$('tablev#mytable').load('./1.php #mytable');
}, 5000);
Would anyone please advise how in jade for nodejs I can truncate a string to a number of characters/words, ideally conscious about the HTML markup within the string?
This should be similar to Django's truncatechars/truncatewords and truncatechars_html/truncatewords_html filters.
If this doesn't exist in jade, which way is right to go? I'm starting my first nodejs+express+CouchDB app, and could do it within nodejs code but it seems that filters are much more appropriate.
I would also consider writing a filter like this (and others) if I knew how :))
Just a quick illustration:
// in nodejs:
// body variable comes from CouchDB
res.render('home.jade', { title : "test", featuredNews : eval(body)});
// in home.jade template:
ul.thumbnails
each article in featuredNews.rows
a(href="#"+article.slug)
li.span4
div.value.thumbnail
img(align='left',src='http://example.com/image.png')
p!= article.value.description:truncatewords_html(30)
So I've made up the truncatewords_html(30) thing to illustrate what I think it should be similar to.
Will appreciate any ideas!
Thanks,
Igor
Here is a little "truncate_words" function:
function truncate( value, arg ) {
var value_arr = value.split( ' ' );
if( arg < value_arr.length ) {
value = value_arr.slice( 0, arg ).join( ' ' );
}
return value;
}
You can use it before sending the string to the template, or in the template using a helper method.
cheerio is a nice little library that does a subset of jquery and jsdom. Then it's easy:
app.helpers({
truncateWords_html : function(html, words){
return cheerio(html).text().split(/\s/).slice(0, words).join(" ")
}
})
Then, in a jade template use:
#{truncateWords_html(article.value.description, 30)}
This looks like a generic way to add any filters, hurray! :))
I am developing a mobile (iphone/android) application using appcelerator titanium (sdk 1.6.2).
At a certain point in the app the user choses an image that should be shown in an imageView, base64 encoded, then uploaded to my server.
The problem is the success event of the photo gallery returns the selected image as a blob object and the Titanium.Utils.base64encode method only accepts string values!
Is there any way to convert Titanium.Blob objects to strings?
Here is the code snippet:
var imageView = Titanium.UI.createImageView({
height:200,
width:200,
top:20,
left:10,
backgroundColor:'#999'
});
Titanium.Media.openPhotoGallery({
success:function(event)
{
var cropRect = event.cropRect;
var image = event.media;//blob object
// set image view
Ti.API.debug('Our type was: '+event.mediaType);
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
{
imageView.image = image;// this works
var imgStr=Ti.Utils.base64encode(image);// doesn't work because 'image' has to be a string!, but how?
}
else
{
}
Titanium.API.info('PHOTO GALLERY SUCCESS cropRect.x ' + cropRect.x + ' cropRect.y ' + cropRect.y + ' cropRect.height ' + cropRect.height + ' cropRect.width ' + cropRect.width);
},
allowEditing:true,
popoverView:popoverView,
arrowDirection:arrowDirection,
mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO]
});
Thank you,
var imgStr=Ti.Utils.base64encode(image.toString());
.toString() converts something to a string representation
This worked for me.
var image = event.media;
var imgStr = Ti.Utils.base64encode(image).toString();
i just posted some code for a module to do this conversion, I know a patch is coming from appcelerator, but the module might be useful to you now.
Clearly Innovative Thoughts - Titanium Appcelerator Quickie: base64encode iOS Module