2012-04-13 6 views
10

Tôi mới đến Handlebars hệ thống templating và đây là dự án đầu tiên của tôi mà tôi đang làm việc với Handlebars. Tôi đã tạo mẫu đơn giản:Handlebars - substring

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

Trả lại content là rất dài. Tôi muốn nó ngắn hơn, ví dụ 150 ký tự. Tôi đã cố gắng sử dụng JavaScript substring() phương pháp như sau:

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

Nhưng nó rõ ràng đã không làm việc. Bạn có thể cho tôi một số mẹo để giải quyết vấn đề đó không. Cảm ơn

Edit: Được rồi, vấn đề giải quyết: Tôi đã thực hiện nó trong PHP, vì vậy đó quay trở lại nội dung có chiều dài hiện nay thích hợp:

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

Để đóng câu hỏi, nộp giải pháp của bạn và chấp nhận nó như là một câu trả lời. – craniumonempty

Trả lời

19

Bạn sẽ muốn tạo một helper tay lái trong javascript để thực thi mã chuỗi:

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

Sau đó, trong mẫu của bạn, bạn muốn gọi nó là như thế này:

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

Bạn cũng có thể đặt đối số "150" cho trình trợ giúp. –

-1

Ngoài ra, bạn có thể viết một hàm tay lái trợ giúp để thực hiện các chuỗi con

0

Tôi đã giải quyết được sự cố trong PHP. Tôi đã sửa đổi kịch bản PHP và bây giờ nội dung trả lại có độ dài thích hợp.

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

my xác định helper với cắt chuỗi chỉ

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

Yeh người trợ giúp tay lái chắc chắn là con đường phía trước đây;

Đây là trợ giúp của tôi cho phép bạn chỉ định và kết thúc điểm + cũng là địa điểm "..." nếu string.length> kết thúc.

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

Bên trong mẫu:

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

Đối với những người làm việc với EmberJS, đây là giải thích của tôi về một helper 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); 
}); 

ví dụ sử dụng:

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

hoặc

{{substr description max=20}} 

Edit: một "ràng buộc" helper thậm chí còn tốt hơn.

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

này cũng làm việc với các thuộc tính lồng nhau:

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

trả lại mới Ember.Handlebars.SafeString (ngoài); – Pierozi

+0

đã chỉnh sửa, cảm ơn bạn – Alex

21

Tôi đang sử dụng giá trị như các tùy chọn, bắt đầu từ giá trị cũng như kết thúc giá trị thông qua như là đối số hình mẫu. Hãy thử điều này:

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

Trong mẫu:

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

nó sẽ in 300 ký tự đầu tiên của giá trị. Hy vọng điều này sẽ giúp bạn.

+1

Đây phải là câu trả lời đúng, nó hoàn chỉnh hơn câu trả lời khác. – azuax

+0

Thanks .. @azuax – Naitik

1

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

Chỉ với một cải ít nhất là việc xác minh passedString, và giá trị mặc định cho startString và Endstring. tôi thêm '...' ở phần cuối của chuỗi cắt ngắn :)

Chỉ cần gọi cho tay lái với {{truncate your_text_variable 0 50}}