Marionette官网学习 - Common Concept

学习内容：http://marionettejs.com/docs/master/basics.html

做 一个简单的模板渲染功能

(1) 在Marionette官网下载所需要的js文件依赖

<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/backbone.radio.js"></script>
<script src="js/backbone.marionette.js"></script>

这些都是必需的。

(2) DOM搭建

<section id="example">
    <h3>Here is the example</h3>
    <article id="article-region"></article>
</section>

<!--template-->
<template id="template-identifier">
    <div>example</div>
</template>

(3) JS

.bg-success{background-color: green;}
.bg-error{background-color: red;}

//-model-
var MyModel= Backbone.Model.extend({});
var myModel= new MyModel();
myModel.set('isSuccessful',true);

//-子View-
var MyView=Mn.View.extend({
    template: '#template-identifier',
    className: function(){
            return this.model.get('isSuccessful')? 'bg-success':'bg-error'
    },
});
var myView=new MyView({model:myModel});

//-父View-
var ContainerView= Mn.View.extend({
    template: false,
    el: '#example',
    regions: {
        'myRegion':'#article-region'
    }
});
var containerView= new ContainerView();
containerView.showChildView('myRegion',myView);