Is there a better way to capitalize the first character of a string in Jade than this?
for list in project.lists
- list.name = list.name.charAt(0).toUpperCase() + list.name.slice(1);
li #{list.name}
Doing this every time I want to capitalize a variable is ugly, is there any way in Jade that I can define a custom function that I have available in every template like:
for list in project.lists
li #{ucfirst(list.name)}
Thanks in advance!
The contents of #{} are executed as standard JS, so you can pass in helper functions for use with things like that. You haven't specified, but assuming you are using Jade along with Express, you can do something like this:
app.locals.ucfirst = function(value){
return value.charAt(0).toUpperCase() + value.slice(1);
};
That will expose a function called ucfirst within the Jade template. You could also pass it in as part of locals every time you render, but if you are using Express it will do it automatically.
If you're willing to resort to CSS, you can create a class that capitalizes the first letter of every word within the target element.
CSS
.caps {
text-transform: capitalize;
}
Jade
div.caps
each foo in ['one', 'two', 'three']
span #{foo}
Resulting HTML
<div class="caps"><span>one</span><span>two</span><span>three</span>
Resulting view
One Two Three
If you are using pug with gulp, this can be helpful:
mixin ucfirst(text)
- text = text.charAt(0).toUpperCase() + text.slice(1);
.
#{text}
Simply call this as any other mixin:
li
+ucfirst(list.name)
Related
I wrote a helper function to help me format URL, which is the combination of some object attributes. How do I concatenate this attribute in handlebars view?
Helper function
const url = (link)=>{
return process.env.URL+'/'+link.replace(/ /gi,'-').toLowerCase();
};
My view
{{this.name}}
What you can do to accomplish this is to create a helper to concatenate your strings and pass the concatenated string to the url helper.
In JavaScript, every non-arrow function has a local variable named arguments assigned an object, in this object you'll find (you guessed it) the arguments passed to the function when it was invoked.
Using this arguments object we can create a helper for Handlebars.js that lets us concatenate as many strings as we want.
Because (as described by the documentation) the arguments object is an array-like object, we have to create an actual array from it that we can use to concatenate everything together using Array.join to make it as simple as possible.
Handlebars.registerHelper('concat', function() {
return [...arguments].join('');
});
But why would it be that simple, right?
What I discovered when I was trying out this solution is that the last element in the arguments object is an object with some information about the helper that was used, like the name.
To make this work with that little bit of information in mind we have to slice the array so that the last element gets removed and then concatenate it.
Handlebars.registerHelper('concat', function() {
arguments = [...arguments].slice(0, -1);
return arguments.join('');
});
We now have a helper that we can use to concatenate whatever we want, the only thing left to do is pass it to the other helper, the url helper in this case.
{{url (concat 'samples/' this.name '/' this.class '/' this.id)}}
^ I found a comment on an GitHub issue regarding chaining helpers and that Handlebars.js apparently has native support for this.
I hope this helped and that I didn't spoon-feed to much without explaining it properly.
We use this syntax to include partial during run time:
{{> (lookup . 'file') }}
file is a var name from the parent file.
I tried to add a prefix to the file name, So I tried:
{{> lookup . 'path/file'}}
{{> (lookup . (strmerge 'path/' 'file')) }}
Note: I made a helper method to merge strings
I tried those and others but nothing worked for me.
Does any one know how to do this?
Thanks
In the code {{> (lookup . 'file') }} we are telling Handlebars that the name of our partial is to be found at the file property of the current context object.
Assuming a context object like { file: 'myPartial' }, the result of the lookup is {{> myPartial }}, which tells Handlebars to render a partial called "myPartial".
If we want to add a prefix to our partial, so that Handlebars will register a partial called "path/myPartial", the simplest way to do this would be to add that path to the value of the file property in the context object. The context object would become: { file: 'path/myPartial' }.
If, for some reason, the "path/" prefix must be added to the template and not the data, then we will need to determine a way to produce the String "path/myPartial" from our current data.
Both of your attempts put "file" in the name of the property to be looked-up. Your code will try to find the property path/file on the context object and this will fail. We will definitely need a helper to concatenate Strings, but it must concatenate "path/" with the value of file, not the literal String, "file".
To achieve our goal we will no longer require the lookup helper. The lookup was needed only because you can't write {{> (file) }} in Handlebars, because Handlebars will treat file as a helper instead of as a variable. However, since we are using a concatenation helper, strmerge, we can use the String it returns as our partial name, without any need for a lookup. The correct code becomes:
{{> (strmerge 'path/' file) }}
It's important to note that file in this example is not in quotes. It is a variable, not a String.
I have created a fiddle for your reference.
I am creating an application where the site menu would be dynamically loaded from JSON file. Each menu may correspond to an action that would be defined inside the ng-click directive. This would look something like this
<li ng-repeat="menuItem in menuContainer.menus" class="{{menuItem.cssClass}}">
<a href="{{menuItem.url}}" ng-click="{{menuItem.clickAction}}">
<i class="{{menuItem.iconClass}}"></i>{{menuItem.name}}
<span class="badge">{{menuItem.subMenus.length}}</span>
</a>`enter code here`
<li>
Now the problem is ng-click does not recognize the clickAction as a function, I believe this is due to linking process. I want to know is there any way to evaluate a string to method. I tried do $eval but it executes the function on load.
How do I do this?
Define methods not as strings, but as functions and replace ng-click="{{menuItem.clickAction}}" to ng-click="menuItem.clickAction()". Another way to define function on $scope, like:
$scope.executeString = function(body){
eval(body);
};
and replace your ng-click to ng-click="executeString(menuItem.clickAction)". Anyway, use eval is antipattern;)
Remember, that ng-click and other directives, like that, takes angular expression as parameter. And if body of you expression is a = b + c than angular convert it in javascript like $scope.a = $scope.b + $scope.c
In Drupal 6, how do you print a taxonomy term as a CSS body class?
I have found this snippet that lets you print almost every aspect of Drupal content as a body class, but it doesn't include taxonomy terms:
http://www.davidnewkerk.com/book/122
Being able to print taxonomy terms as a body class is essential for theming processes, so I am surprised that a solution is not readily available.
Check what variables are passed to the page template by either doing print_r($vars) or dpm($vars) in your page pre-process function or using the http://drupal.org/project/devel_themer module. The usage of dpm require you to install the devel module.
You will find that some themes will pass $taxonomy as a variable to page.tpl.php . If that is not the case you can find the taxonomy terms in the $node variable which is also available in the page.tpl.php in some themes.
(The above holds true for my fusion based theme acquia marina http://drupal.org/project/acquia_marina ). Once you have these taxonomy terms available you can easily print them out in your body classes.
After much hard work, I found a very easy way to do this.
On Drupal Snippets, there is a snippet that lets you print out the taxonomy terms applied to each page as text.
The only problem is that the snippet will print any spaces or punctuation that are in the taxonmy term, which is no good for body classess.
However, by adding a str_replace command, you can strip out all the spaces and punctuation.
I'm sure there are other people who wants to print taxonmy terms as body classes, so to save them the bother, here is the code that I used with the str_replace command added.
Put the following in template.php:
function getTerm($label, $vid, $link) {
$node = node_load(array('nid'=>arg(1)));
foreach((array)$node->taxonomy as $term){
if ($term->vid == $vid){
if ($link){
$link_set[] = l($term->name, taxonomy_term_path($term));
} else {
$link_set[] = $term->name;
}
}
}
if (!empty($link_set)){
$label = ($label) ? "<strong>$label </strong>" : "";
$link_set = $label.implode(', ', $link_set);
}
$link_set = str_replace(' ', '_', $link_set);
$link_set = str_replace('&', 'and', $link_set);
$link_set = strtolower($link_set);
return $link_set;
}
Put the following in Page.tpl.php:
<body class="taxonomy-<? print getTerm(false, 1, false);?>">
I hope this helps anyone who has the same problem.
Extra tips:
(1)In the code I have posted, the only punctuation that is striped out is the ampersand (i.e. '&').
If you have other punctuation to strip out use the following:
$link_set = str_replace('INSET_PUNCTUATION_HERE', 'INSERT_REPLACEMENT_HERE', $link_set);
Place this command under the other $link_set lines in the code I have posted for template.php.
(2) In the page.tpl.php code I have posted, the "taxonomy-" part places the words taxonomy and a dash before each body class term. You can edit this as you wish to get the results your require.
I have a Jade template that needs to call a helper, but not display its output:
// views/foo.html.jade:
p
Some content...
#{ someHelperSetterMethod('bar'); }
Unfortunately, since someHelperSetterMethod returns nothing, I get "undefined" output in my template. Is there a way to do non-outputting evaluation?
p
some content
- someHelperSetterMethod('bar')