Question

这是“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'));

我在这条线上做错了什么？ THX！

Answer 1

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

1.1.0 - 2013年10月10日 [...] - Backbone Views不再自动附加传递给构造函数的选项this.options，而Backbone Models不再附加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的副作用，以免意外更改不属于您的内容。

Backbone.view选项错误

1 个答案: