레이아웃에 영역을 동적으로 추가/제거

Question

마리오 네트로 레이아웃에 영역을 동적으로 추가하거나 제거 할 수 있습니까? 내 응용 프로그램은 레이아웃에서 영역을 밀어 넣을 수 있어야합니다. 이것은 GitHub가 프로젝트의 소스 코드를 드릴 다운 할 때 뷰를 밀고 팝하는 것과 유사합니다. 다음 뷰를 표시 할 때 애니메이션 위에 슬라이드가 표시되고 나간 후 뒤로 슬라이드됩니다. 아이디어는 이전의 견해를 유지할 필요가 있다는 것입니다. 또 다른 비유는 iOS에서 UINavigationController가 작동하는 방식입니다.

어쩌면 영역을 추가하고 제거하는 작업을 처리 할 수있는 사용자 정의 레이아웃을 정의해야합니까?

Answer 1

잘 모르겠지만 일부 html의 존재와 그 html의 표시와 혼동을 느낄 수 있습니까?

즉, 항목의 합성보기를 만들 수 있으며 한 번에 하나의 항목 만 표시 할 수 있습니다. 그런 다음 jQuery 애니메이션이나 다른 애니메이션 라이브러리를 사용하여 CompositeView의 항목을 이동하십시오.

Answer 2

내 필요에 맞게 컨테이너보기를 구현했습니다. Marionette에서 기대하는 것처럼 이벤트 심판을 정리합니다.

https://github.com/ayoung/backbone-vs-marionette/blob/marionette/public/js/views/mainContainer.js

Answer 3

예 가능합니다. 다음은 내가 사용하는 코드입니다.

레이아웃 :

var Layout = Marionette.LayoutView.extend({ 
    initialize: function(options) { 
     options = _.extend({ regionTag: 'div' }, options); 
     this.mergeOptions(options, ['regionTag', 'regionName']); 
    }, 

    template: false, 

    regions: {}, 

    append: function(view) { 
     var viewClass = 'dynamic-layout-' + this.regionName, 
      viewCount = $('.' + viewClass).length + 1, 
      viewId = this.regionName + '-view-' + viewCount, 
      $el = $('<' + this.regionTag + '/>', { 
       id: viewId, 
       class: viewClass 
      }); 
     this.$el.append($el); 

     var region = Marionette.Region.extend({ 
      el: '#' + viewId 
     }); 

     this.regionManager.addRegion(viewId, region); 
     this.regionManager.get(viewId).show(view); 
    }, 

    appendEmpty: function(id, className, tag) { 
     tag = tag || 'div'; 
     var data = { id: id, className: className, tag: tag }; 
     var $el = Marionette.Renderer.render('#append-layout-template', data); 
     this.$el.append($el); 
     var region = Marionette.Region.extend({ 
      el: '#' + id 
     }); 
     this.regionManager.addRegion(id, region); 
    }, 

    customRemove: function(regionId) { 
     this.regionManager.removeRegion(regionId); 
    } 
}); 

도움이되는 템플릿 :

<script type="text/template" id="append-layout-template"> 
    <<%= tag %> id='<%= id %>' class='<%= className %>'></<%= tag %>> 
</script> 

컨트롤러 :

var view = new SomeView(); 
// the region name will be a part of a unique id 
var layout = new Layout({ regionName: 'myRegion' }); 
// add a dynamic region to the layout and a view to that region 
layout.append(view); 
// same as above (you have to name the id and class yourself) 
var regionId = 'myRegionId'; 
layout.appendEmpty(regionId, 'someClassName', 'span'); 
layout.getRegion(regionId).show(view); 
// remove a region 
layout.customRemove(regionId);