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>

この行でエラーが発生していますMyApp.trigger（ "some：event"）; 。次のリンクからコードをコピーしました

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

モジュールを2つ以上使用し、それぞれに複数のビューがあるのを手伝ってもらえますか。上記のURLと同じように、バックボーンを使用して通信する必要があります。

ありがとう。

4

1 に答える 1

0

これをさまざまな方法で解決しようとしましたが、最終的に次の解決策に行き着きました。解決策には、モジュールにコードを記述し、マリオネット モジュールとベントを使用してそれらと通信することが含まれます。マリオネットは私を大いに助けてくれました。さまざまな機能が私の開発にさらに役立つことを願っています.

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

});

これが他の人に役立つことを願っています。

于 2012-07-03T06:13:48.700 に答える