백본 모듈 및 모듈 통신

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

당신이 날 모듈 두 개 이상의 사용에 도움이 수와 그들 각각의 여러 전망이 있습니다. 위의 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

백본 모듈 및 모듈 통신

답변

관련 문제