主幹模塊和模塊通信

<head> 
    <title></title> 

    <script src="javascript/vendor/jquery-1.6.4.min.js" type="text/javascript"></script> 
    <script src="javascript/vendor/underscore.js" type="text/javascript"></script> 
    <script src="javascript/vendor/backbone.js" type="text/javascript"></script> 


</head> 

<body> 
<script type="text/javascript" > 

var MyApp = (function(_, Backbone){ 

var myApp = {}; 
    var initializers = []; 

    myApp.addInitializer = function(callback){ 
    var initializer = { 
     obj: this, 
     callback: callback 
    } 
    initializers.push(initializer); 
    }; 

    myApp.initialize= function(){ 
    _.each(initializers, function(initializer){ 
     initializer.callback.call(initializer.obj); 
    }); 
    }; 

    // the event aggregator 
    myApp.vent = _.extend({}, Backbone.Events); 

    // the other app initialization code ... 

    return myApp; 
})(_, Backbone); 

var MyModule = (function(MyApp, Backbone){ 

    var MyView = Backbone.View.extend({ 
    initialize: function(){ 
     MyApp.bind("some:event", this.someCallback, this); 
    }, 

    someCallback: function(){ 
     alert("I'm Doing Stuff!!!"); 
    } 
    }); 

    // ... other code, including MyApp.addInitializer 

})(MyApp, Backbone); 

var AnotherModule = (function (MyApp, Backbone) { 
    var anotherModule = {}; 

    anotherModule.SomeFunction = function() { 
     MyApp.trigger("some:event"); 
     //alert("Hello"); 
    }; 

    return anotherModule; 
})(MyApp, Backbone); 

// kick it all off and show the alert box 
//$(function(){ 
// MyApp.initialize(); 
// AnotherModule.SomeFunction(); 
//}); 


$(function() { 
    MyApp.initialize(); 
    AnotherModule.SomeFunction(); 

}); 


</script> 



</body>

我在這行上得到錯誤MyApp.trigger（「some：event」）; 。我從下面的鏈接複製的代碼主幹模塊和模塊通信

網址：http://lostechies.com/derickbailey/2011/11/17/introduction-to-composite-javascript-apps/

你能不能幫我用模塊的兩個或更多，他們每個人都有多個視圖。我需要像上面的URL一樣使用主幹來進行通信。

謝謝。

來源

2012-06-22 irfan Munir

Derick我錯過了一些在這裏捕獲代碼給我錯誤「MyApp.trigger不是一個函數」。 –

我試圖用不同的方式解決這個問題，但最終以下面的解決方案結束。解決方案包括將我的代碼寫入模塊並使用牽線木偶模塊和發泄口與他們進行通信。牽線木偶幫助了我很多，我希望我的發展能夠進一步發揮不同的功能。

的index.html

<script type="text/javascript"> 
     $(function() { 

      //var myModule = MyApp.module("MyModule"); 

      // console.log(MyApp.MyModule.someData); //=> public data 

      MyApp.OrganizerModule.someFunction(); //=> public data 

      //var LayOutModel = new MyApp.ShellModule.LayOut(); 

      var LayoutView = new MyApp.ShellModule.LayoutView(); 
      LayoutView.render(); 

      var Explorer = new MyApp.OrganizerModule.ExplorerView(); 

     }); 

    </script>

以下模板用於：

<script id="layout_temp" type="text/template"> 
     <div id="layout"> 
       <div id="header"> 
      header 
     </div> 
     <div id="container"> 
      <div id="center" class="column"> 
       center 
      </div> 
      <div id="left" class="column"> 
       left 
      </div> 
      <div id="right" class="column"> 
       right 
      </div> 
     </div> 
     <div id="footer"> 
      footer 
     </div> 
    </div> 
    </script> 
    <script id="Explorer" type="text/template"> 
     <div > start : 
     <button>Say hello</button> 
     </div> 
    </script>

這裏的模塊定義和事件的使用木偶

MyApp.module("ShellModule", function (ShellModule, MyApp, Backbone, Marionette, $, _) { 

    ShellModule.LayoutView = Backbone.View.extend({ 
     initialize: function() { 
      //Backbone.ModelBinding.call(this); 

      alert("Hello2"); 
      MyApp.vent.on("toolClick_Event", function (cat) { 

       alert("test toolClick_Event fired"); 

      }); 
     } 
     // , events: { 
     //  'toolClick_Event': 'toolClick_Event' 
     // } 
    , render: function() { 

     var template = _.template($("#layout_temp").html(), {}); 

     $("#Maincontainer").html(template); 
     //$(this.el).append("<ul> <li>hello world</li> </ul>"); 
    } 



    }); 

});

而其他認購使用MyApp.vent.trigger觸發事件的模塊。

MyApp.module("OrganizerModule", function (OrganizerModule, MyApp, Backbone, Marionette, $, _) { 

    // Private Data And Functions 
    // -------------------------- 

    var myData = "this is private data"; 

    var myFunction = function() { 
     console.log(myData); 
    } 


    // Public Data And Functions 
    // ------------------------- 

    OrganizerModule.someData = "public data"; 

    OrganizerModule.someFunction = function() { 
     //console.log(MyModule.someData); 
     alert(OrganizerModule.someData); 
    } 




    OrganizerModule.ExplorerView = Backbone.View.extend({ 

     el: "#center", 
     events: { 
      'click button': 'toolClick' 
     } 
    , initialize: function() { 

     this.render(); 
     this.setElement(this.el); 
    } 
    , render: function() { 

     var template = _.template($("#Explorer").html(), {}); 
     //this.$el.html.add(template); 

     // $("#center").append(template); 
     //return this.el; 

     $(this.el).html(template); 
     return this; 

    } 


    , toolClick: function() { 
     alert("test toolClick"); 
     // var template = _.template($("#Explorer").html(), {}); 
     //$("#center").append(template); 
     MyApp.vent.trigger('toolClick_Event'); 

     $("#Maincontainer").append("<div> other data </div>"); 
    } 
    }); 

});

希望這會對其他人有所幫助。

來源

2012-07-03 06:13:48

主幹模塊和模塊通信

回答

相關問題