主干模块和模块通信

<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

主干模块和模块通信

回答

相关问题