4

我有一个backbone.js 视图，它从HTML 文件中读取模板并将其模型中的值插入到模板中。其中一个值在变量title中，它的长度足以破坏页面上元素的流动。我想使用 Javascript 来限制最大值。可以拥有的字符数title，而不是在后端进行，因为最终title必须显示完整的字符。

我尝试选择模板渲染后包含的 div title，但似乎无法选择它。否则我该怎么做？

模板

<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

两件事，第一件事，让任何 View 的孩子我建议你用这种方式而不是你正在做的事情：

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

"this.$" 是一个具有特定视图范围的 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});
    }

});
于 2012-07-16T13:41:42.437 回答