Home/ Questions/Q 8166307
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T19:49:07+00:00

<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

  • 0
<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>

I am getting error on this line MyApp.trigger(“some:event”); . I copied the code from following link

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

Can you help me using modules two or more and each of them have multiple views. I need to communicate them using backbone as the above URL did.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tried to solve this in different ways but kept ending up with the following solution. The solution involves writing my code in modules and using marionette modules and vent to communicate with them. Marionette helped me a lot and I hope the different features further in my development.

    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>

    The following templates are used:

     <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>

    Here is the Module definition and the subscription of the event using Marionette

    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>");
     }



    });

});

    And the other Module that triggers the event using 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>");
    }
    });

});

    Hope this will be helpful to others.

    • 0