Backbone.view选项错误

Question

i've got text toolbar: http://take.ms/V4b1g

This is "backbone.view" function:

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;
});

when i'm trying to click on this: http://take.ms/X7dpz i've got this error:

Uncaught TypeError: Cannot read property 'attr' of undefined 

in this line:

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

what i'm doing wrong in this line? thx!

Answer 1

Backbone views used to attach the options passed to the constructor in the view's this.options but that stopped a long time ago. From the 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.

If you want to use this.options in your views, set it up yourself:

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

or better, use _.pick to grab just the keys you're expecting:

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

or _.defaults to fill in default values for your options:

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

Using _.pick or _.defaults as above also has the happy side effect of copying the options so that you accidentally change something that doesn't belong to you.