Javascript 把手 - 子串

Handlebars - substring

提问by user1292810

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

我是Handlebars模板系统的新手，这是我使用 Handlebars 进行的第一个项目。我创建了简单的模板：

<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 contentis very long. I want it to be shorter, e.g. 150 chars. I was trying to use JavaScript substring()method as follows:

退货content时间很长。我希望它更短，例如 150 个字符。我试图使用 JavaScriptsubstring()方法如下：

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

<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:

编辑：好的，问题解决了：我已经在 PHP 中完成了，因此返回的内容现在具有适当的长度：

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

回答by Noah Rosenberg

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

您将需要在 javascript 中创建一个 Handlebars 助手来执行子字符串代码：

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>

回答by Naitik

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.

它将打印值的前 300 个字符。希望这对你有帮助。

回答by Alex

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

对于那些使用 EmberJS 的人，这是我对 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}}

回答by ZelkiN

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 :)

在passingString 的验证和startString 和Endstring 的默认值上稍作改进。我在截断字符串的末尾添加了 '...' :)

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

只需使用 {{truncate your_text_variable 0 50}} 调用车把

回答by driftcrow

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);
});

回答by pleshy

Yeh the handlebars helper is definitely the way forward here;

Yeh 把手助手绝对是这里的前进方向；

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

这是我的助手，它允许您指定和结束点 + 如果 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>

回答by Antoine vallée

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);
});

回答by Gwyn Howell

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

或者，您可以编写一个把手辅助函数来执行子字符串

回答by user1292810

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

我已经用 PHP 解决了我的问题。我修改了 PHP 脚本，现在返回的内容长度合适。

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