2015-01-06 16 views
14

Tôi bị nhầm lẫn bởi tài liệu Marionette (2.3.0) từ liên kết bên dưới cho biết tính năng Vùng Ứng dụng không còn được dùng nữa. Thay vào đó, nên sử dụng Chế độ xem bố cục. Điều đó có nghĩa là tôi không nên sử dụng MyApp.addRegions() nữa? Sau đó, tôi nên thêm Giao diện Chế độ xem vào ứng dụng của mình như thế nào?Những điều cần sử dụng vì Vùng Ứng dụng Marionette không được chấp nhận

http://marionettejs.com/docs/marionette.application.html#application-regions

Application Regions

Cảnh báo: phản Tính năng này bị phản đối. Thay vì sử dụng ứng dụng làm gốc của cây xem của bạn, bạn nên sử dụng Giao diện Chế độ xem. Để phạm vi Chế độ xem bố cục của bạn cho toàn bộ tài liệu, bạn có thể đặt el của nó thành 'nội dung'. Điều này có thể trông giống như sau:

var RootView = Marionette.LayoutView.extend ({el: 'body'});

+0

OK. Cảm ơn bạn @ oɔɯǝɹ. – Cassandra

+1

bản sao có thể có của [MarionetteJS: Vùng ứng dụng so với Bố cục] (http://stackoverflow.com/questions/27807663/marionettejs-application-regions-vs-layouts) –

Trả lời

4

Tôi muốn giải thích bằng một ví dụ rất đơn giản về cách sử dụng chế độ xem bố cục trong marionette.

html

<div id="appDiv"></div> 

    <script type="text/template" id="mainTemplate"> 
     <div id="div1"></div> 
     <div id="div2"></div>  
    </script> 

    <script type="text/template" id="itemTempFirst"> 
     <p>some text item 1 view</p> 
     <p>some text item view 1</p> 
    </script> 

    <script type="text/template" id="itemTempSecond"> 
     <p>some text item 2 view</p> 
     <p>some text item view 2</p> 
    </script> 

Mã JS: -

 var app = new Marionette.Application(); 
    var LayoutViewObj = Marionette.LayoutView.extend({ 
     template:"#mainTemplate", 
     el:"#appDiv", 
     regions:{ 
      reg1:"#div1", 
      reg2:"#div2" 
     } 
    }); 

     var layoutViewInstance = new LayoutViewObj(); 
     layoutViewInstance.render(); 

     var ItemView1Obj = Marionette.ItemView.extend({ 
     template:"#itemTempFirst" 
     }); 

     var ItemView2Obj = Marionette.ItemView.extend({ 
     template:"#itemTempSecond" 
     }); 

     var item1 = new ItemView1Obj(); 

     var item2 = new ItemView2Obj(); 

     layoutViewInstance.getRegion("reg1").show(item1); 

     layoutViewInstance.getRegion("reg2").show(item2); 

Xin lưu ý tôi đã cố gắng mà không el yếu tố trước đó, nhưng tôi đã không có may mắn và như tôi đã sử dụng el: cuộc sống "# someElem" đã dễ dàng hơn

Các vấn đề liên quan