javascript - Handlebars - substring

Question

I am new to Handlebars templating system and this is my first project I am working on with Handlebars. I have created simple template:

<script id="article_list_template" type="text/x-handlebars-template">
    {{#each this}}
    <div class='article'>
    <a href='article.php?id={{id_news}}' data-article_id='{{id_news}}'>
        <h1>{{title}}</h1>
    </a>
        <p> {{{content}}} </p>
    <div style='clear: both;'> </div>
    </div>
    {{/each}}
</script>

Returned content is very long. I want it to be shorter, e.g. 150 chars. I was trying to use JavaScript substring() method as follows:

<p> {{{content.substring(0,150)}}} </p>

But it obviously did not work. Could you give me some tips how to deal with that problem. Thanks

Edit: Okay, problem solved: I have done it in PHP, so that returned content has now proper length:

foreach ($articles as $a) {
    $a->content = cut_text( $a->content, 30);
}

Answer 1

You're going to want to create a Handlebars helper in javascript to execute the substring code:

Handlebars.registerHelper('trimString', function(passedString) {
    var theString = passedString.substring(0,150);
    return new Handlebars.SafeString(theString)
});

Then, in your template, you'd call it like this:

<p> {{{trimString content}}} </p>

Answer 2

I am using values as options, starting value as well as ending value passed as arguments form template. Try this:

Handlebars.registerHelper('trimString', function(passedString, startstring, endstring) {
   var theString = passedString.substring( startstring, endstring );
   return new Handlebars.SafeString(theString)
});

In template:

<p>{{{trimString value 0 300}}}</p>

it'll print first 300 characters of the value. Hope this help you.

Answer 3

For those who work with EmberJS, here is my interpretation of a substr helper:

Ember.Handlebars.registerHelper('substr', function(property, options) {

    var str = Ember.get(this, property);
    var opts = options.hash;

    var start = opts.start || 0;
    var len = opts.max;

    var out = str.substr(start, len);

    if (str.length > len)
        out += '...';

    return new Ember.Handlebars.SafeString(out);
});

Usage examples:

{{substr description start=5 max=20}}

or

{{substr description max=20}}

Edit: a "bound" helper is even better.

Ember.Handlebars.registerBoundHelper('substr', function(value, options) {

    var opts = options.hash;

    var start = opts.start || 0;
    var len = opts.max;

    var out = value.substr(start, len);

    if (value.length > len)
        out += '...';

    return new Ember.Handlebars.SafeString(out);
});

this works also with nested properties:

{{substr view.product.description max=50}}

Answer 4

my define helper with string cut indicate

Handlebars.registerHelper('trimS', function(passedString, start, length ){
var mlength = length,preS='',tailS='';
if(start>0 && passedString.length>3){
    var preS= '...';
    mlength = length -3;
} ;
if(passedString.length>(start + length )){
    tailS = '...';
    mlength = mlength -3;
};
var theString = preS + passedString.substr(start, mlength) + tailS;
return new Handlebars.SafeString(theString);
});

Answer 5

Yeh the handlebars helper is definitely the way forward here;

Here's my helper that allows you to specify and end point + also places "..." if string.length > end.

Handlebars.registerHelper('substring', function( string, start, end ) {

    var theString = string.substring( start ,end );

    // attach dot dot dot if string greater than suggested end point
    if( string.length > end ) {
      theString += '...';
    }

    return new Handlebars.SafeString(theString);
});

Inside the template:

<p>{{{substring myString 0 100}}}</p>

Answer 6

Handlebars.registerHelper('truncate', function(passedString, startstring, endstring) {
    if(passedString){
        if(!startstring) startstring=0;
        if(!endstring) endstring=30;
        var theString = passedString.substring( startstring, endstring );
        return new Handlebars.SafeString(theString+'...');
    }
});

With just a little amelioration as the verification of passedString, and default value for startString and Endstring. I add '...' at the end of truncated string :)

Just call handlebars with {{truncate your_text_variable 0 50}}

Answer 7

I'm using this helpers

Handlebars.registerHelper('truncate', (value, options) => {
  const opts = options.hash;
  const max = opts.max || '250';
  const out = value.substring(0, max);
  return new Handlebars.SafeString(value.length > max ? `${out}...` : out);
});

Answer 8

I have solved my problem in PHP. I have modified PHP script and now returned content has proper length.

foreach ($articles as $a) {
    $a->content = cut_text( $a->content, 30);
}

Answer 9

Alternatively, you could write a handlebars helper function to perform the substring