把手 - 亚替换 -- javascript 领域 和 templates 领域 和 handlebars.js 领域 相关 的问题

Handlebars - substring


14
vote

问题

中文

我是new to 把手模板系统,这是我的第一个项目,我正在使用车把。我创建了简单的模板:

  <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中完成了它,以便返回的内容现在具有正确的长度:

  /*** My PhoneGap Plugin.xml File ***/ <?xml version="1.0" encoding="utf-8"?> <plugins> <plugin name="App" value="com.phonegap.App"/> <plugin name="Geolocation" value="com.phonegap.GeoBroker"/> <plugin name="Device" value="com.phonegap.Device"/> <plugin name="Accelerometer" value="com.phonegap.AccelListener"/> <plugin name="Compass" value="com.phonegap.CompassListener"/> <plugin name="Media" value="com.phonegap.AudioHandler"/> <plugin name="Camera" value="com.phonegap.CameraLauncher"/> <plugin name="Contacts" value="com.phonegap.ContactManager"/> <plugin name="Crypto" value="com.phonegap.CryptoHandler"/> <plugin name="File" value="com.phonegap.FileUtils"/> <plugin name="Network Status" value="com.phonegap.NetworkManager"/> <plugin name="Notification" value="com.phonegap.Notification"/> <plugin name="Storage" value="com.phonegap.Storage"/> <plugin name="Temperature" value="com.phonegap.TempListener"/> <plugin name="FileTransfer" value="com.phonegap.FileTransfer"/> <plugin name="Capture" value="com.phonegap.Capture"/> <plugin name="SystemPlugin" value="com.phonegap.test.SystemPlugin" /> </plugin> 0  
英文原文

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

回答列表

29
 
vote
vote
最佳答案
 

您将要在JavaScript中创建一个把手帮助,以执行子字符串代码:

  numbers1  
然后,在您的模板中,您可以称之为:
  numbers2  
 

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> 
</div
 
 
 
 
23
 
vote

我使用值作为选项,启动值以及作为参数表单模板传递的终止值。尝试:

  numbers3  

在模板中:

  numbers4  

它会打印值的前300个字符。希望这可以帮助你。

 

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.

</div
 
 
 
 
4
 
vote

对于那些与Emberjs合作的人,这是我对Substr辅助者的解释:

  numbers5  

使用示例:

  numbers6  

  numbers7  

编辑:一个"绑定" 助手更好。

  numbers8  

此工作也有嵌套属性:

  numbers9  
 

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}} 
</div
 
 
 
 
1
 
vote

我的定义辅助者用弦切割表示

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

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); }); 
</div
 
 
1
 
vote

yeh把手助手绝对是前进的方向;

这是我的帮助程序,允许您指定和结束点+也将"..." 如果string.length&gt;结束。

  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>   
 

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> 
</div
 
 
1
 
vote

  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+'...');      }  });  

只有一点改善作为传递的验证,以及startstring和endstring的默认值。 我在截断的字符串末尾添加'...':)

只需用{{truncate your_text_variablies 0 50}}}}}

 

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

</div
 
 
0
 
vote

我正在使用这个帮助者

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

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); }); 
</div
 
 
-1
 
vote

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

 

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

</div
 
 
-1
 
vote

我在php中解决了我的问题。我已经修改了PHP脚本,现在返回的内容具有正确的长度。

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

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

相关问题

32  this.props.history.push在某些组件中工作,而不是其他组件  ( This props history push works in some components and not others ) 
我正在尝试使用 browserHistory.push 以编程方式更改页面。在我的一个组件中,但不是我嵌入在那个内部的组件中。 是否有人知道为什么我的项目仅针对子组件抛出错误但不是父组件? 无法读取未定义 父组件 import React, {Component} from 'react'; impo...

1  如何在无需发送HTML代码的情况下共享AngularJS指令  ( How to share angularjs directives without the need to send html code ) 
我正在创建一个AngularJS模块,其中包含一些指令将在我组织内的其他项目中重复使用。目前,当某些项目需要使用此通用模块时,我需要发送两件事:使用AngularJS代码的JavaScript,其中所有指令都是创建的,并且我的指令使用的所有模板视图。 我的当前结构如下: 0 years 0 mons 9645 d...

19  Reactjs组件应该什么时候使Ajax调用从道具更新状态?  ( When should reactjs components make ajax calls to update state from props ) 
我有一个反应组件,显示有关实体的信息。实体的ID通过属性传递。该组件在"ComponentDidmount" 中启动Ajax调用,以获取调用/失败时的实体和更新状态。 此工作正常,除非组件在实体ID更改时未获取新数据(通过Props)。 我尝试在"componentwillreceiveprops" 中启动呼叫,但在...

1  使用jQuery.Val()更新Ember Textfield的值  ( Update the value of ember textfield using jquery val ) 
我有这些行我的观点: //this code is within a {{#each item in controller.content}} so id will not be unique //so by giving it just an id like i have is not going to w...

0  调用它后,字符串数组仍然为空白  ( String array remains blank after calling it ) 
从文件中调用此文件 hfunc.js var vid 似乎是空白的。 (我用 alert(vid.length) )检查了它: var vid = []; $(document).ready(function wfiller() { for (var n = 0; n < 1; n++) ...

6  如何格式化使用R DT(DataTables)包生成的表的标题  ( How do you format the header of a table produced using the r dt datatables pac ) 
R包DT使用DataTables JavaScript库绘制漂亮的表。我可以使用FormatStyle()函数来确定表中单元格的格式,但似乎没有格式化列标题的函数。有没有办法格式化表的标题,例如字体,对齐等? 关于堆栈溢出的DT的许多问题都是特定于r闪亮,而且我不使用r闪亮。 ...

2  HREF链接在手风琴内部不起作用,似乎JavaScript覆盖单击功能  ( A href links are not working inside of a accordion it seems javascript overwrit ) 
当单击HREF链接时,HREF链接在手风琴内部不起作用。似乎手风琴的JS函数覆盖了一个HREF链接。现在单击该链接,而不是打开另一个页面,它会扩展(这是函数的函数),这是JS的原始功能。我想做的是保持手风琴函数,并使一个HREF链接工作。这是示例代码: http://jsfiddle.net/mrpwa//a ...

4  Rails动作电缆和Turbolinks:避免多个绑定  ( Rails action cable and turbolinks avoid multiple bindings ) 
我在我的application.html中有一个代码.haml,该代码决定是否根据某些用户属性将用户订阅到给定频道。 是的,因为我在身体中有这段代码,当我点击要重定向到另一个页面的链接时,它再次订阅用户而不是保持旧连接,所以我有 receive() 方法多次执行。 这是 application.html.haml :...

0  无法仅发送填充的填充输入,在ReactJS上有Axios [重复]  ( Cannot send only the filled input with axios on reactjs ) 
这个问题已经在这里有答案: 从javascript中的对象中删除空白属性 (39答案) ...

0  ScriptManager重复JavaScript  ( Scriptmanager duplicates javascript ) 
我有一个可以使用的UserControl,用于例如GridView ItemTemplate,这意味着控件可能会或可能不会在页面加载时的页面上。在控件内部的情况下,我将通过异步回拨(通过UpdatePanels)突破GridView。 控制本身是注册器ScriptBlocks,因为它取决于JavaScripts。首先...

1  D3 / Topojson无法获得路径元素的质心  ( D3 topojson cannot get centroid of path element ) 
我有一个美国json文件,我正在使用它来生成地图。路径正在生成状态,但现在我想在每个路径/州的中心添加状态名称。 这是JSON文件的示例 undefined1 我通过追求我已经创建的SVG创建了状态 undefined2 在这里我正在尝试将状态名添加为文本 undefined3 但我只是继续收...

0  动态并行执行数组中项目的函数  ( Dynamic parallel execution of a function for items in an array ) 
<代码> Promise.map 执行<代码> function x() 同时在一个数组项。考虑的是得到填充所述阵列的情形和不断增长的dynamically.Can <代码> function x() 对于加入到阵列动态每个项目被执行? 例如: 1) time : 11:00 AM arrayX : [...

22  在JavaScript中使用时区和夏令时  ( Working with timezones and daylight savings time in javascript ) 
我的单页JavaScript应用程序通过REST调用以JSON格式检索数据。使用标准ISO8601格式的UTC时区格式化日期,例如 2011-02-04T19:31:09Z 。 注册服务时,用户从下拉列表中选择它们的时区。此时区可能与用户的浏览器的时区不同。 JavaScript应用程序知道用户所选时区始终是什么。 ...

12  如何使用$转换服务获得Tostate Param? (新的UI-Router)  ( How to get tostate param with transitions service new ui router ) 
我正在使用 ui-router 1.0.0-alpha.3 。 旧事件已弃用。 所以我试图转换 $rootScope.$on('$stateChangeStart', (event, toState) => { //... }); 与 $ transitions.onstart hoo...

3  Protractor / Cucumber试验套件在预期失败时停止运行。该  ( Protractor cucumber test suite stop running when expect fails in promise then ) 
我正在研究使用Promractor(v 0.24.1),黄瓜(v 0.4.0),柴(v 1.9.1)和柴贴(v 4.1.1)的测试框架。 selinium-server-standal.jar(v 2.41.0) ChromedRiver(V 2.10) 在此步骤中,我验证了数量不同的方式。其中一个在承诺中,第二...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有