车把 - 子串答案

【问题标题】：Handlebars - substring车把 - 子串
【发布时间】：2012-04-13 09:38:48
【问题描述】：

我是 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>

返回的content 很长。我希望它更短，例如150 个字符。我试图使用 JavaScript substring() 方法如下：

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

但这显然没有用。你能给我一些提示如何处理这个问题吗？谢谢

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

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

【问题讨论】：

要关闭问题，请提交您的解决方案并接受它作为答案。

标签： javascript templates handlebars.js

【解决方案1】：

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

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

然后，在您的模板中，您可以这样称呼它：

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

【讨论】：

您也可以将“150”作为助手的参数。

【解决方案2】：

我使用值作为选项、起始值以及作为参数表单模板传递的结束值。试试这个：

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

在模板中：

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

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

【讨论】：

这应该是正确答案，比另一个更完整。

【解决方案3】：

对于那些使用 EmberJS 的人，这是我对 substr 助手的解释：

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

用法示例：

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

或

{{substr description max=20}}

编辑：“绑定”助手更好。

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

这也适用于嵌套属性：

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

【讨论】：

return new Ember.Handlebars.SafeString(out);

【解决方案4】：

我的定义助手用字符串切割指示

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

【讨论】：

【解决方案5】：

是的，车把助手绝对是前进的方向；

这是我的助手，可让您指定和结束点 + 如果 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);
});

模板内部：

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

【讨论】：

【解决方案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+'...');
    }
});

只是对passedString的验证做了一点改进，startString和Endstring的默认值。我在截断字符串的末尾添加了 '...' :)

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

【讨论】：

【解决方案7】：

我正在使用这个助手

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

【讨论】：