Question

<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那样。

感谢。

Answer 1

我尝试以不同的方式解决这个问题，但最终得到了以下解决方案。解决方案包括在模块中编写代码并使用牵线木偶模块和通风口与它们进行通信。 Marionette帮助了我很多，我希望在我的开发中能有更多不同的功能。

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

以下是模块定义以及使用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>");
     }



    });

});

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

});

希望这对其他人有所帮助。

主干模块和模块通信

1 个答案: