9

マリオネット ビューをアプリケーション領域およびレイアウトと組み合わせて動作させようとしていますが、レイアウト内のネストされたビューをレンダリングすることができないようです。

編集:OptionsViewと の両方がでBreadcrumbsViewレンダリングされることを期待していNavigationLayoutましたが、ナビゲーション領域でレンダリングする必要があります。ただし、ナビゲーション領域はまったくレンダリングされません。コンソールにエラーは表示されません。

私の構造は次のとおりです。

- Navigation region
  - Navigation layout
    - Options region 
    - Breadcrumbs region
- Content region

ItemViewをナビゲーション領域に割り当てると、期待どおりに機能します。

App = new Backbone.Marionette.Application();
App.addRegions({
    'nav': '#nav',
    'content': '#content'
});

var NavigationLayout = Backbone.Marionette.Layout.extend({
    template: '#nav-template',
    regions: {
        'breadcrumbs': '#breadcrumbs',
        'options': '#options'
    }
});

var BreadcrumbsView = Backbone.Marionette.ItemView.extend({
    template: '#breadcrumbs-template'
});

var OptionsView = Backbone.Marionette.ItemView.extend({
    template: '#options-template'
});

var ContentView = Backbone.Marionette.ItemView.extend({
    template: '#content-template'
});

App.addInitializer(function(options) {
    var navigationLayout = new NavigationLayout();

    App.nav.show(navigationLayout);
    App.content.show(new ContentView());

    navigationLayout.breadcrumbs.show(new BreadcrumbsView());
    navigationLayout.options.show(new OptionsView());
});

$(function() {
    App.start();
});

縮小されたテストケースはここにあります

4

1 に答える 1

18

optionsわかりました、ようやく問題が見つかりました:レイアウトで領域に名前を付けることはできません。

レイアウトで定義されているすべての領域は、レイアウト インスタンスに直接関連付けられています。したがって、リージョンは次のように定義されます。


Layout.extend({
  regions: {
    options: "#options"
  }
});

layoutInstance.optionsを Region インスタンスに設定することになります。Backbone.View は を定義しoptionsて他の目的で使用するため、これは問題です。

領域の名前を、既存のビューで使用されている既存のキーワードまたは属性以外の名前に変更すると、これが修正されます。


Layout.extend({
  regions: {
    optionRegion: "#options"
  }
});

JSFiddle の作業はこちら: http://jsfiddle.net/tegon/64ovLf64/

于 2012-10-01T13:49:21.630 に答える