Backbone.view 选项错误

Question

我有文本工具栏：http://take.ms/V4b1g

这是“backbone.view”函数：

define([
'View/Popup',
'text!Templates/Toolbar/Edit.tpl'
], function(Popup, _edit){

var Edit = Backbone.View.extend({
    className: 'svs-cke',
    events:{
        'mousedown':                'mousedown',
        'click .bold':              'toggleBold',
        'click .italic':            'toggleItalic',
        'click .underline':         'toggleUnderline',
        'click .link':              'toggleLink',

        'click .size':              'toggleSize',

        'keypress [name="size"]':   'setSize',

        'keypress [name="link"]':   'setUrl'
    },

    initialize: function(){

    },

    render: function(){
        this.$el.append(_.template(_edit).apply(this.options));
        return this.$el;
    },

    mousedown: function(e){
        if(e.target !== this.$el.find('[name="link"]').get(0)){
            //e.preventDefault();
        }
    },

    toggleSize: function(e){
        this.$el.find('[name="size"]').val(this.options.size.attr('class'));
        this.$el.find('[name="size"]').show();
        this.$el.find('[name="size"]').focus();
    },

    setSize: function(e){
        if(e.which == 13){
            e.preventDefault();
            var url = $(e.currentTarget).val();
            if(url.length > 0){
                this.options.size.attr('class', url);
                this.options.size.trigger('sizeChange');
            }else{
                this.options.size.attr('class', '#');
                this.options.size.trigger('sizeChange');
            }

            $(e.currentTarget).hide();
        }
    },

    toggleBold: function(e){
        document.execCommand('bold', false, null);
        $(e.currentTarget).toggleClass('t-active');
    },

    toggleItalic: function(e){
        document.execCommand('italic', false, null);
        $(e.currentTarget).toggleClass('t-active');
    },

    toggleUnderline: function(e){
        document.execCommand('underline', false, null);
        $(e.currentTarget).toggleClass('t-active');
    },

    toggleLink: function(e){
        if(this.options.nodes.url){
            this.$el.find('[name="link"]').val(this.options.nodes.url);
        }

        this.lastRange = window.getSelection().getRangeAt(0);
        this.$el.find('[name="link"]').show();
        this.$el.find('[name="link"]').focus();
    },

    setUrl: function(e){
        if(e.which == 13){
            e.preventDefault();
            this.$el.find('[name="link"]').blur();
            window.getSelection().addRange(this.lastRange);
            var url = $(e.currentTarget).val();
            if(url.length > 0){
                document.execCommand('createLink', false, url);
            }else{
                document.execCommand('unlink', false, null);
            }

            $(e.currentTarget).hide();
            this.$el.find('.link').toggleClass('t-active');
        }
    }
});

return Edit;
});

当我试图点击这个时：http://take.ms/X7dpz 我遇到了这个错误：

Uncaught TypeError: Cannot read property 'attr' of undefined 

在这一行：

this.$el.find('[name="size"]').val(this.options.size.attr('class'));

我在这行做错了什么？谢谢！

Answer 1

用于在视图的this.options 中附加传递给构造函数的选项的主干视图，但很久以前就停止了。来自Change Log：

1.1.0 — 2013 年 10 月 10 日 [...] - 主干视图不再自动附加作为this.options 传递给构造函数的选项，主干模型不再附加url 和urlRoot 选项，但如果你愿意，你可以自己做。

如果您想在视图中使用this.options，请自行设置：

initialize: function(options) {
    this.options = options;
}

或者更好的是，使用_.pick 来获取您期望的键：

initialize: function(options) {
    this.options = _(options || { }).pick('option', ...);
}

或_.defaults为您的选项填写默认值：

initialize: function(options) {
    this.options = _({ }).defaults(options || { }, { /* defaults go here... */ });
}

如上所述使用_.pick 或_.defaults 还具有复制options 的愉快副作用，因此您会意外更改不属于您的内容。