2015-01-03 4 views
0

내가있어 텍스트 도구 모음 :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/V4b1g

이 "backbone.view"기능입니다 제가했습니다 http://take.ms/X7dpz

Uncaught TypeError: Cannot read property 'attr' of undefined 

이 줄 :

this.$el.find('[name="size"]').val(this.options.size.attr('class')); 
이 오류가 발생했습니다

이 줄에서 내가 뭘 잘못하고 있니? 고마워!

+0

) 옵션을 전달하지 않은 경우) $ var = new Edit()와 같이 클래스를 인스턴스화하는 코드를 표시하십시오. 새 Edit() 구조 안에 객체를 전달해야합니다. size 속성을 포함해야합니다. –

답변

2

보기의 this.options에서 생성자에게 전달 된 옵션을 연결하는 데 사용되는 백본보기이지만 오래 전에 중지 된보기입니다.

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.

당신이보기에 this.options을 사용하려면, 자신을 설정 :

:

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

이상을, 당신이 기다리고있어 단지 키를 잡아 _.pick를 사용 Change Log가에서

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

또는 _.defaults 옵션의 기본값을 채우십시오.

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

위와 같이 _.pick 또는 _.defaults을 사용하면 options을 우연히 복사하여 사용자가 소유하지 않은 것을 실수로 변경할 수 있습니다.