Limit the number of characters in a view (Backbone.js)

Question

I have a backbone.js view that reads a template from an HTML file and inserts values ​​from its model into the template. One of these values ​​is in the title variable, which can be long enough to disrupt the flow of elements on the page. I want to use Javascript to limit max. the number of title characters can have, and not do it on the backend, because in the end the full title should be displayed.

I tried to select the div containing the title after the template was displayed, but cannot select it. How to do it otherwise?

Template

 <script type="text/template" id="tpl_PhotoListItemView"> <div class="photo_stats_title"><%= title %></div> </script> 

View

 PhotoListItemView = Backbone.View.extend({ tagNAme: 'div', className: 'photo_box', template: _.template( $('#tpl_PhotoListItemView').html() ), render: function() { $(this.el).html( this.template( this.model.toJSON() ) ); console.log($(this.el).children('.photo_stats_title')); <!-- returns nothing --> this.limitChars(); return this; }, limitChars: function() { var shortTitle = $(this.el).children('.photo_stats_title').html().substring(0, 10); $(this.el .photo_stats_title).html(shortTitle); } }); 

Answer 1

Instead of trying to change the title after rendering it, change it as shown.

Pass the maxlength variable to your template, and then:

 <script type="text/template" id="tpl_PhotoListItemView"> <div class="photo_stats_title"><%= title.substr(0,maxLength) %></div> </script> 

If title.length less than maxlength, the entire line will be displayed. If it is larger, only the first characters of maxlength are maxlength .

Alternatively, simply copy the maximum length of the title into the .substr() call

If you need to perform more complex truncation (for example, adding "..." to truncated headers), you better change the header before displaying the template by passing the truncated version of the header to the template

Another option is to override Model.parse(response) by creating a shortTitle attribute on the model; that way it is always available when you work with a model

Answer 2

Two things, first, to get any kind of children, I recommend you this method instead of what you do:

 console.log( this.$('.photo_stats_title') ); 

"this. $" is a jQuery selector with a specific area of ​​your view.

Secondly, in order to wrap your model in order to deal with this, I do not propose checking this in your template or your presentation. In your model, define the new shortTitle attribute:

 var titleMaxLength = 20; var YourModel : Backbone.Model.extend({ defaults : { id : null, shortTitle : null, title : null }, initialize : function(){ _.bindAll(this); this.on('change:name', this.changeHandler); this.changeHandler(); }, changeHandler : function(){ var shortTitle = null; if( this.title ){ shortTitle = this.title.substr(0, titleMaxLength); } this.set({ shortTitle : shortTitle }, {silent: true}); } });