on 키 누르기가 jquery에 의해 트리거되면 내 모델이 정의되지 않음

Question

내 앱을 구조화하기 위해 backbone.js와 함께 require.js를 사용하고 있습니다. 내보기 중 하나에서 :

키를 누를 때 이벤트가 JQuery와 및 함수가 호출 sendMessage 첨부에 의해 트리거됩니다

define(['backbone', 'models/message', 'text!templates/message-send.html'], function (Backbone, Message, messageSendTemplate) { 
    var MessageSendView = Backbone.View.extend({ 
     el: $('#send-message'), 
     template: _.template(messageSendTemplate), 
     events: { 
      "click #send": "sendMessage", 
      "keypress #field": "sendMessageOnEnter", 
     }, 
     initialize: function() { 
      _.bindAll(this,'render', 'sendMessage', 'sendMessageOnEnter'); 
      this.render(); 
     }, 
     render: function() { 
      this.$el.html(this.template); 
      this.delegateEvents(); 
      return this; 
     }, 
     sendMessage: function() { 
      var Message = Message.extend({ 
       noIoBind: true 
      }); 
      var attrs = { 
       message: this.$('#field').val(), 
       username: this.$('#username').text() 
      }; 

      var message = new Message(attrs); 
      message.save(); 

      /* 
     socket.emit('message:create', { 
      message: this.$('#field').val(), 
      username: this.$('#username').text() 
     }); 
     */ 

      this.$('#field').val(""); 
     }, 
     sendMessageOnEnter: function (e) { 
      if (e.keyCode == 13) { 
       this.sendMessage(); 
      } 
     } 
    }); 
    return MessageSendView; 
}); 

-이 뷰가 처음 require.js에 의해로드 될 때 사용할 수 있지만, 어떤 이유로 메시지 모델은 정의되지 않은 때문이다 . 어떤 힌트? 감사합니다

Answer 1

내 인라인 주석을 참조하십시오

내가 require.js 너무 익숙하지 않다 그러나, 나는 당신이`Message`을 저장할 필요가 있다고 생각

sendMessage: function() { 
     // first you declare a Message object, default to undefined 
     // then you refrence to a Message variable from the function scope, which will in turn reference to your Message variable defined in step 1 
     // then you call extend method of this referenced Message variable which is currently undefined, so you see the point 
     var Message = Message.extend({ 
      noIoBind: true 
     }); 
     // to correct, you can rename Message to other name, e.g. 
     var MessageNoIOBind = Message.extend ... 
     ... 
    }, 

Answer 2

제 생각 엔 sendMessageOnEnter을 코드의 다른 곳에서 keypress 이벤트 처리기로 바인딩 한 것 같습니다. 이렇게하면 바운드 이벤트 처리기의 함수가 호출 될 때 this 컨텍스트를 변경합니다. 기본적으로 this.sendMessage()를 호출하면 this은 더 이상 MessageSendView 객체가 아니며 keypress 이벤트를 바인딩 한 jQuery 요소보다 가능성이 높습니다. jQuery를 사용하고 있으므로 $ .proxy를 사용하여 sendMessageOnEnter 함수를 올바른 컨텍스트에 바인딩하면이 문제를 해결할 수 있습니다. 같은 : (주 -이 전혀 테스트되지 않았습니다)

var view = new MessageSendView(); 

$('input').keypress(function() { 
    $.proxy(view.sendMessageOnEnter, view); 
}); 

나는이 여기에, 도움이 당신을 위해 좀 더 읽기 바랍니다. 해피 코딩!

Binding Scopes in JavaScript

$.proxy