私は 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でHandlebarsヘルパーを作成する必要があります。
Handlebars.registerHelper('trimString', function(passedString) {
var theString = passedString.substring(0,150);
return new Handlebars.SafeString(theString)
});
次に、テンプレートでは、次のように呼び出します。
<p> {{{trimString content}}} </p>
テンプレートから引数として渡される開始値と終了値をオプションとして使用しています。これを試して:
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文字を出力します。これがお役に立てば幸いです。
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}}
文字列カットを使用した私の定義ヘルパーは
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);
});
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+'...');
}
});
PassStringの検証として少し改善し、startStringとEndstringのデフォルト値を追加しました。切り捨てられた文字列の最後に「...」を追加します:)
{{truncate your_text_variable 050}}でハンドルバーを呼び出すだけです
私はこのヘルパーを使用しています
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);
});
ええ、ハンドルバーヘルパーは間違いなくここで前進する方法です。
これは、エンドポイントを指定して配置できるヘルパーです+ 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>