如何使用browserify（CommonJS的）

Question

我需要把事件聲明方式以下socketio事件註冊socketio自定義事件在backbonejs：

• 插座連接
• 插座上斷開
• 套接字消息

目前我放在module.exports之外。我使用NPM，杯和browserify我的主幹應用

下面的代碼工作正常。我只是想在這聲明的module.exports

var $ = require('jquery'), 
     Backbone = require('backbone'), 
     homeTemplate = require("../../templates/home/homeTemplate.hbs"), 
     socket = require('socket.io-client')('http://localhost:8080'); 

     socket.on('connect', function(){ 
      $('#incomingChatMessages').append($('<li>Connected</li>')); 
     }); 

     socket.on('message', function(message) { 
      $('#incomingChatMessages').append($('<li></li>').text(message)); 
     }); 

    Backbone.$ = $; 

    module.exports = Backbone.View.extend({ 

     el: $("#page"), 

     initalize: function(){ 
     }, 

     render: function(){ 
      console.log("home view"); 
      $('.navbar-collapse li').removeClass('active'); 
      $('.navbar-collapse li a[href="#"]').parent().addClass('active'); 
      this.$el.html(homeTemplate); 
     }, 

     events: { 
      'keypress #outgoingChatMessage': 'processOutgoingMessage' 
     }, 

     processOutgoingMessage: function(e) { 
      if(e.which == 13) { 
       event.preventDefault(); 
       socket.send($('#outgoingChatMessage').val()); 
       $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val())); 
       $('#outgoingChatMessage').val(''); 
      } 
     } 
    }); 

Answer 1

• 內正常方式註冊的socketio事件，因爲socketIO不是骨幹組成。您可以使用通用的 骨幹事件或將套接字包裝在模型中。

• 下面是使用主幹全局事件處理事件的 骨幹視圖的一種方式

  var $ = require('jquery'), 
      Backbone = require('backbone'), 
      homeTemplate = require("../../templates/home/homeTemplate.hbs"), 
      socket = require('socket.io-client')('http://localhost:8080'); 
  
      socket.on('connect', function(){ 
       Backbone.trigger("socket:connect");    
      }); 
  
      socket.on('message', function(message) { 
       Backbone.trigger("socket:message");    
      }); 
  
  Backbone.$ = $; 
  
  module.exports = Backbone.View.extend({ 
  
      el: $("#page"), 
  
      initalize: function(){ 
       Backbone.on("socket:connect", this.connect, this); 
       Backbone.on("socket:message", this.message, this); 
      }, 
  
      render: function(){ 
       console.log("home view"); 
       $('.navbar-collapse li').removeClass('active'); 
       $('.navbar-collapse li a[href="#"]').parent().addClass('active'); 
       this.$el.html(homeTemplate); 
      }, 
  
      events: { 
       'keypress #outgoingChatMessage': 'processOutgoingMessage' 
      }, 
  
      connect : function(event){ 
       $('#incomingChatMessages').append($('<li>Connected</li>')); 
      }, 
  
      message : function(event){ 
       $('#incomingChatMessages').append($('<li></li>').text(message)); 
      }, 
  
      processOutgoingMessage: function(e) { 
       if(e.which == 13) { 
        event.preventDefault(); 
        socket.send($('#outgoingChatMessage').val()); 
        $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val())); 
        $('#outgoingChatMessage').val(''); 
       } 
      } 
  }); 
  

編輯：

• 我能得到這個運行在一定程度上。它缺少一個 正確的套接字連接，但在其他方面工作正常。
• 請隨意對這個fiddle工作。非常感謝@Louis 幫助我setup小提琴