Question

我有一个backbone.js视图，它从HTML文件中读取模板，并将模型中的值插入到模板中。其中一个值在变量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);
    }
});

Answer 1

不是在渲染后尝试修改标题，而是在渲染时对其进行修改。

将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()

的调用中

如果您需要执行更高级的截断（例如添加＆＃39; ...＆＃39;到截断的标题），您最好在渲染模板之前修改标题，并传递截断的版本标题中的标题

另一种选择是覆盖Model.parse(response)，在模型上创建shortTitle属性;这样，只要您使用模型

，它就始终可用

Answer 2

两件事，第一件事，是为了得到任何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});
    }

});

限制视图中的字符数（Backbone.js）

2 个答案: