Marionette官网学习 - Common Concept

来源:互联网 发布:造价大师软件 安徽 编辑:程序博客网 时间:2024/04/30 18:48

学习内容: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);
0 0
原创粉丝点击