更改字体大小Backbone.js

时间:2015-01-02 21:07:31

标签: javascript backbone.js attributes backbone-views attr

我已经使用主干制作了这个工具栏:http://take.ms/3tYhM

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',
        '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();
        }
    },

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

我需要再添加一个按钮:'更改字体大小'什么与我的属性有关。我怎样才能以更优雅和简单的方式做到这一点?试着做这个约4天:(

在toolbar.tpl中添加:

<div class="size"><div size-class="bigger"></i></div>

在backbone.view中添加更改大小的新函数:

sizeSelect: function(e){
        $(e.currentTarget).siblings('.selected').removeClass('selected');
        $(e.currentTarget).toggleClass('selected');

        var size = this.$el.find('.size.selected')
        if(size.length){
            $('[svs-size]').attr('class', size.find('div').attr('size-class'));
            $('[svs-size]').trigger('sizeChange');
        }

    }

添加事件以保存模型:

        el.bind("sizeChange", function(){
        var section = el.parents('section');
        var index   = section.index();
        var model   = collection.at(index);
        model.set(Helper.sectionToObj(section))
    });

我的HTML:

<div svs-size class="smaller"></div>

但这对我不起作用。我做错了什么? BIG thx!

0 个答案:

没有答案