0

Marionette を使用して、領域をレイアウトに動的に追加および削除することは可能ですか? 私のアプリは、レイアウトから領域をプッシュおよびポップできる必要があります。これは、プロジェクトのソース コードをドリルダウンするときに GitHub がビューをプッシュおよびポップする方法に似ています。次のビューを表示するときにスライド オーバー アニメーションが表示され、バックアウトするとスライドして戻ります。アイデアは、以前のビューを維持する必要があるということです。もう 1 つの類推は、iOS で UINavigationController がどのように機能するかです。

それとも、その場で領域の追加と削除を処理できるカスタム レイアウトを定義する必要があるのでしょうか?

4

3 に答える 3

1

結局、自分のニーズに合うようにコンテナビューを実装することになりました。マリオネットで期待するように、イベント参照をクリーンアップします。

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

于 2012-10-22T21:23:45.617 に答える
0

よくわかりませんが、HTMLの存在とそのHTMLの表示に混乱している可能性がありますか？

つまり、アイテムのCompositeViewを作成して、一度に1つのアイテムのみを表示することができます。次に、jQueryアニメーションまたは別のアニメーションライブラリを使用して、CompositeViewのアイテム間を移動します。

于 2012-10-17T00:20:46.297 に答える
0

はい、可能です。これが私が使用するコードです。

レイアウト：

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);
于 2015-07-16T04:00:56.913 に答える