leapfrogtechnology / just-handlebars-helpers Goto Github PK
View Code? Open in Web Editor NEWA package with common Handlebars helpers.
Home Page: https://yarn.pm/just-handlebars-helpers
License: MIT License
A package with common Handlebars helpers.
Home Page: https://yarn.pm/just-handlebars-helpers
License: MIT License
I have this in my page:
{{log "The or operator: " (or false false)}}
And I get back:
The or operator: true
which is obviously wrong.
If I register a new 'or' helper, where I check the hasOwnProperty then everything works fine:
Handlebars.registerHelper('or', function () {
var params = Array.prototype.slice.call(arguments);
if ((typeof params[params.length - 1] === 'object')) {
params.pop();
}
for (var index in params) {
if (params.hasOwnProperty(index) && params[index]) {
return true;
}
}
return false;
});
The or operator: false
This helper should check whether or not the array contains an element and return boolean
.
Something like this:
var array = [1, 2, 3];
var value = 2;
{{includes array value}}
Since it returns a boolean
, we can use it in any conditional helpers like:
{{#if (includes array value)}}
<!-- Do something -->
{{/if}}
Includes = {{ifx (includes array value) 'Yes' 'No'}}
[Helper Name]
| [One line description]
|code:
const factorial=(num)=>{
if(num===0 || num===1){
return 1;
}
return num*factorial(num-1);
}
console.log(factorial(18)) //6402373705728000
Add a number and currency formatting helper which beautifies the numbers that represent length/distance, currency or any. Implement different currency formats accordingly.
Reference:
We need a conditional helper to check if the string matches a regex pattern something like:
{{#if (match '[email protected]' '[a-z][a-z0-9_]+@\w+\.\w{3,4}')}}
Email is valid.
{{/if}}
Email is {{ifx (match '[email protected]' '[a-z][a-z0-9_]+@\w+\.\w{3,4}') 'valid' 'invalid'}}
The ifx
helper just provides a way of using the ternary operator ?:
in handlebars.
Currently, we can do this with it:
<li class="{{ifx isEven 'even' 'odd'}}">
But a lot of times we we simply want to return nothing for the else
case.
For instance:
<li class="{{ifx isActive 'active' ''}}">
<li class="{{ifx isUnavailable 'unavailable' ''}}">
<li class="{{ifx isUnavailable 'unavailable' ''}}">
So, I think we need to make the third parameter for {{ifx}}
optional with a default value empty string (""
).
So, we can just omit the else
case like this:
<li class="{{ifx isActive 'active'}}">
<li class="{{ifx isUnavailable 'unavailable'}}">
<li class="{{ifx isUnavailable 'unavailable'}}">
include
helper just like what we have in cummings {{{include 'sometemplate
abc='xyz'}}}`{{{lead=lead ...}}}
formatDate
would be one. Can have other helpers in addition to this.I think we should use rollup
for bundling and just npm scripts for simple tasks.
Hi.
From backend I received this data
{
count: '...'',
hasResult: true,
query: '123', // input value
}
and my template is something like this
{{#with this}}
{{#if hasResult}}
For your query <strong>"{{query}}"</strong> found <strong>{{count}} peoples</strong>
{{else}}
Peoples not found
{{/if}}
{{/with}}
I spent a lot of time trying to understand why instead of the value, a lie is returned to me before I realized that I connected your package with helper that have same name as "count".
How to avoid this with continue to use with
(I like to use direct variables comp. to this.someValue)
Thanks!
ceil
, floor
, add
, subtract
We need a new npm script something like npm run doc
to automatically generate the markdown and regenerate README using the doc blocks.
@sanjeevkpandit knows how to do it ๐.
and
and or
helper.and
: this will accept two or more parameters and return true if all of them are true.or
: this will accept two or more parameters and return true if any of them is true.{{#if (and value1 value2) }}
// do Something
{{else}}
// do something else
{{/if}}
{{#if (or value1 value2) }}
// do Something
{{else}}
// do something else
{{/if}}
sprintf
helper based upon https://github.com/alexei/sprintf.jsvar H = require('just-handlebars-helpers');
node
, browserify
and webpack
Change the current set of JSDoc to use a proper standard.
Right now we have this:
/**
* Determine whether or not two values are equal (==) i.e weak checking.
* @example
* {{eqw '3' 3}} => true
*
* @param value1
* @param value2
* @returns boolean
*/
export function eqw(value1, value2) {
return (value1 == value2);
}
We are missing the type of parameter in all places. Need to update all the JSDoc blocks throughout the repository.
Example:
/**
* Determine whether or not two values are equal (==) i.e weak checking.
* @example
* {{eqw '3' 3}} => true
*
* @param {any} value1
* @param {any} value2
* @returns {boolean}
*/
export function eqw(value1, value2) {
return (value1 == value2);
}
Our docs does include the parameter type. We need to do the same in our code.
There currently isn't a way to deal with locale-specific date formatting directives without ability to change moment's locale
split
, join
and some other trivial stuffsCurrently logical operators (like and, or) in the helpers are based on Javascript if operator.
Please consider implementing logical operators bases of the way of Handlebars if operator functions.
So that
{{#if (and a b)}} smth {{/if}}
would act 100% as {{#if a}}{{#if b}} smth {{/if}}{{/if}}
Currently there are cases (for example empty array) where these two constructions differ and it may result unexpected behaviour in constructions like:
{{# if (or a b)}}
Found:
{{#if a}}Element a{{/if}}
{{#if b}}Element b{{/if}}
{{/if}}
Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.