보기의 문자 수 제한 (Backbone.js)

Question

HTML 파일에서 템플릿을 읽고 해당 모델의 값을 템플릿에 삽입하는 backbone.js보기가 있습니다. 이 값 중 하나는 변수 title에 있으며 페이지의 요소 흐름을 방해 할 정도로 길 수 있습니다. 자바 스크립트를 사용하여 최대 값을 제한하고 싶습니다. 문자 수는 title 일 수 있으며, 결국 title 전체가 표시되어야하므로 백엔드에서 수행 할 수 있습니다.

템플릿을 렌더링 한 후에 title이 포함 된 div를 선택하려고했지만 선택하지 못했습니다. 그렇지 않으면 어떻게해야합니까?

템플릿

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

보기

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

이 렌더링 된 것로 수정을 렌더링 한 후 제목을 수정하려고하기보다는.

는,뿐만 아니라 당신의 템플릿에 maxlength 변수를 전달합니다 최대 길이보다 작

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

title.length 경우, 전체 문자열이 표시됩니다. 더 큰 경우 첫 번째 maxlength 문자 만 표시됩니다. 당신이 고급 절단 단계를 수행하기 위해 (예를 들어 추가 '...'잘린 제목에) 필요한 경우

는 다른 방법으로, 간단하게, 당신은 수정 더 낫다 .substr()

에 전화로 title의 최대 길이를 하드 템플릿을 렌더링하기 전에 제목을 잘라내어 템플릿에 잘린 버전을 전달하십시오.

또 다른 옵션은 Model.parse(response)을 덮어 쓰고 모델에 shortTitle 속성을 생성하는 것입니다.

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

"이 : 당신이 모델과

Answer 2

두 가지, 첫 번째 작업하고 내가 대신 당신이 무엇을하고 있는지 당신이 방법을 권장 어떤 뷰의 아이를 얻을 때마다이 방법은 항상 사용할 수 . $ "는보기의 특정 범위를 가진 jQuery 선택기입니다.

두 번째로는이 문제를 처리하기 위해 모델을 래핑하는 것이지만 템플릿 또는 뷰에서이를 확인하지 않는 것이 좋습니다. 모델에서 shortTitle에 대한 새로운 속성을 정의하십시오.

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

});