Question

这是我的LayoutView：

define(["marionette", "lodash", "text!home/template.html"],
function(Marionette, _, templateHTML) {

    var HomeView = Marionette.LayoutView.extend({

        template: _.template(templateHTML),

        regions: {
            ad: ".adspace",
            products: ".products"
        }

    });

    return HomeView;
});

这是我的app.js：

define(["marionette", "backbone", "router", "home/view"],
function(Marionette, Backbone, Router, HomeView) {
    'use strict';

    var App = new Marionette.Application();

    App.on('start', function() {
        Backbone.history.start();
        new HomeView();
    });

    return App;
});

这是我的router.js

define(["backbone", "home/view"], function(
    Backbone,
    HomeView
){
    'use strict';

    var Router = Backbone.Router.extend({
        routes: {
            "": "index"
        },

        index: function() {
            console.log("HEYEEY");
            return new HomeView().render();
        }
    });

    return new Router();
});

当我尝试在浏览器中查看页面时，不会呈现布局视图。不知道我在这里做错了什么

Answer 1

尝试在layoutView上定义el属性：

var HomeView = Marionette.LayoutView.extend({
    el: "#dom-element", 
    template: _.template(templateHTML),

    regions: {
        ad: ".adspace",
        products: ".products"
    }
});

或使用区域来显示布局视图：

var region = new Marionette.Region({"el": "#container"}); 
var layoutView = new HomeView(); 
region.show(layoutView);

这应该有效，因为LayoutViews是从常规的Marionette Itemviews扩展而来的。

Marionette LayoutView无法渲染

1 个答案: