javascript - 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

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

1.1.0 — Oct. 10, 2013 [...] - Backbone Views no longer automatically attach options passed to the constructor as this.options and Backbone Models no longer attach url and urlRoot options, but you can do it yourself if you prefer.

如果您想在 View 中使用 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 的令人愉快的副作用，以便您意外地更改某些内容那不属于你。