1

このようなモデルを作成しました

define(['backbone', 'text_dictionary'], function(Backbone, Text_Dict) {
var IndexPageModel = Backbone.Model.extend({
    defaults:{
        val_btn_gotohomepage : Text_Dict.val_btn_gotohomepage,
        val_btn_gotologinpage : Text_Dict.val_btn_gotologinpage,
        val_btn_gotolistpage : Text_Dict.val_btn_gotolistpage
    }
});
return IndexPageModel;
});

このモデルをこのようにページコードで「new」でインスタンス化しました

define([ 'page_layout', 
     'panel_itemview',
     'header_itemview', 
     'content_itemview', 
     'footer_itemview',
     'templates',
     'text_dictionary',
     'indexpage_model',
     'indexpage_logic'], 
    function( Page,
              Panel,
              Header,
              Content,
              Footer,
              Templates,
              Text_Dict,
              IndexPageModel,
              IndexPage_BusnLogic) {
console.log("Success..Inside Index Page.");
var Page_Index = {};
Page_Index.page = (function(){
    var _pageName = Text_Dict.indexpage_name;
    var _pageModel = new IndexPageModel();
    return _pageLayout = Page.pageLayout({
        name:_pageName,
        panelView:      Panel.panelView({name:_pageName, pagetemplate: Templates.simple_panel}),
        headerView:     Header.headerView({name:_pageName, title: Text_Dict.indexpage_header, pagetemplate: Templates.header_with_buttons}),
        contentView:    Content.contentView({name:_pageName, page_model:_pageModel, pagetemplate:Templates.content_index, busn_logic:IndexPage_BusnLogic.HandleEvents}),
        footerView:     Footer.footerView({name:_pageName, title: Text_Dict.indexpage_footer, pagetemplate: Templates.simple_footer})
    });
})();

return Page_Index;
});

私のページはページレイアウトを使用して作成されます

define([ 'underscore', 'marionette' ], function( _, Marionette ) {
console.log("Success..Inside Index View.");
var Page = {};
var _ReplaceWithRegion = Marionette.Region.extend({
     open: function(view){
        //Need this to keep Panel/Header/Content/Footer at the same level for panel to work properly
        this.$el.replaceWith(view.el);
    }
});
Page.pageLayout = function (opts) {
    var _opts = _.extend ({ name: 'noname',
                            panelView: null,
                            headerView: null,
                            contentView: null, 
                            footerView: null,                               
                            }, opts);
    return new ( Marionette.Layout.extend({
        tagName: 'section', 
        attributes: function() {
            return {
                'id':           'page_' + _opts.name,
                'data-url':     'page_' + _opts.name,
                'data-role':    'page',
                'data-theme':   'a'
            };
        },
        template: function () { 
            return "<div region_id='panel'/><div region_id='header'/><div region_id='content'/><div region_id='footer'/>";
        },
        regions: {
          panel:    {selector: "[region_id=panel]",     regionType: _ReplaceWithRegion},
          header:   {selector: "[region_id=header]",    regionType: _ReplaceWithRegion},
          content:  {selector: "[region_id=content]",   regionType: _ReplaceWithRegion},
          footer:   {selector: "[region_id=footer]",    regionType: _ReplaceWithRegion},
        },

        initialize: function(){
            $('body').append(this.$el);
            this.render();
        },              
        onRender: function() {
            if (this.options.panelView) {
                this.panel.show (this.options.panelView);
            };
            if (this.options.headerView) {
                this.header.show (this.options.headerView);
            };
            if (this.options.contentView) {
                this.content.show(this.options.contentView);
            };
            if (this.options.footerView) {
                this.footer.show (this.options.footerView);
            };
        },
    }))(_opts);
};
return Page;
});

しかし、このようにモデル参照を渡しているときのアイテムビューで

define([ 'underscore', 'marionette', 'event_dictionary', 'app' ], function(_, 
    Marionette, Event_Dict, App) {
console.log("Success..Inside Content Index View.");
var Content = {};
Content.contentView = function(opts) {
    return new (Marionette.ItemView.extend({
        tagName : 'div',
        attributes : function() {
            console.log('options name==' + opts.name);
            console.log("page model=="+opts.page_model);
            return {
                'region_id' : 'content',
                'id' : 'content_' + opts.name,
                'data-role' : 'content'
            };
        },
        initialize : function() {
            _.bindAll(this, "template");
        },
        template : function() {
            return opts.pagetemplate;
        },
        model : function() {
            return opts.page_model;
        }
    }))(opts);
};
return Content;
});

それは私にエラーを与えています

Uncaught TypeError: Object function () {
            return opts.page_model;
        } has no method 'toJSON'
4

2 に答える 2

3

ビューのmodelプロパティを関数にすることはできません。バックボーンでは、(ヘルパー関数を介して) いくつかの場合にこれが許可されますが、この場合は許可されませんurl。_.resultビューコードを変更してmodel関数を持たないようにし、これを で行うだけですinitialize:

initialize: function (options) {
    this.model = this.page_model = options.page_model;
}

更新、私の言葉をそのまま受け入れるわけではないので、これはほぼ確実に例外スタック トレースの一番上にあるMarionette ソースです。繰り返しますview.modelが、関数ではなくモデル オブジェクトでなければなりません。それを修正すると、エラーはなくなります。

于 2013-07-02T08:56:12.213 に答える