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但很久以前就停止了。 从更改日志 ：

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

如果要在视图中使用this.options ，请自己进行设置：

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

或_.pick是，使用_.pick仅获取您期望的键：

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

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

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

像上面那样使用_.pick或_.defaults也会产生复制options的快乐副作用，这样您就意外地更改了不属于您的内容。