4

HTML ファイルからテンプレートを読み取り、そのモデルの値をテンプレートに挿入する backbone.js ビューがあります。この値の 1 つは変数内titleにあり、ページ上の要素の流れを妨げるのに十分な長さになる可能性があります。Javascript を使用して最大値を制限したい。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);
    }
});
4

2 に答える 2

4

レンダリング後にタイトルを変更しようとするのではなく、レンダリングしながら変更します。

maxlengthテンプレートにも変数を渡してから、次のようにします。

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

title.lengthが maxlength 未満の場合、文字列全体が表示されます。大きい場合は、最初のmaxlength文字のみが表示されます。

または、 の最大長をtitle呼び出しにハードコードするだけです。.substr()

より高度な切り捨てを実行する必要がある場合 (切り捨てられたタイトルに「...」を追加するなど)、テンプレートをレンダリングする前にタイトルを変更し、切り捨てられたバージョンのタイトルをテンプレートに渡すことをお勧めします。

別のオプションは、モデルに属性をModel.parse(response)作成してオーバーライドすることです。shortTitleこのようにして、モデルで作業しているときはいつでも利用できます

于 2012-07-16T13:18:33.557 に答える
1

ビューの子を取得するための最初の2つのことは、あなたがしていることではなく、この方法をお勧めします。

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

「this.$」は、ビューの特定のスコープを持つ jQuery セレクターです。

2 つ目は、これを処理するためにモデルをラップすることです。テンプレートまたはビューでこれを検証することはお勧めしません。Model で 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});
    }

});
于 2012-07-16T13:41:42.437 に答える