Marionette官网学习 - View
来源:互联网 发布:奇迹归来坐骑进阶数据 编辑:程序博客网 时间:2024/05/18 01:47
注:实例中省略了Marionette的依赖引用,请参见Common Concept
1. Marionette.View
引用官网描述
A View is a view that represents an item to be displayed with a template. This is typically a Backbone.Model, Backbone.Collection, or nothing at all.
Views are also used to build up your application hierarchy - you can easily nest multiple views through the regions attribute.
2. Render a template
引用官网描述
Overriding render If you want to add extra behavior to your view’s render, you would be best off doing your logic in the onBeforeRender or onRender handlers.
实例:Render template by View 实现 Hello World
<!--template--><script id="template-layout" type="x-template/underscore"> <h1>Hello, world</h1></script>
//构建Viewvar MyView=Mn.View.extend({ template: '#template-layout'});//实例化Viewvar myView = new MyView();//渲染myView.render();//添加到页面$('body').append(myView.$el);
3. Managing an Existing Page
<div id="base-element"> <h1>Hello, world</h1></div>
//创建Viewvar MyView=Mn.View.extend({ el: '#base-element', template: false});//实例化var myView = new MyView();//渲染myView.render();
4. Laying Out Views - Regions
引用官网描述
The Marionette.View class lets us manage a hierarchy of views using regions. Regions are a hook point that lets us show views inside views, manage the show/hide lifecycles, and act on events inside the children.
<!--container--><div id="container"> <h2>Region example</h2> <div id="first-region">First region</div> <div id="second-region">Second region</div></div><!--first region template--><script type="x-template/underscore" id="tpl-view-first-region"> <p>A template for first region</p></script>
//-container view-//define regionsvar MyView = Mn.View.extend({ el:'#container', template: false, regions: { firstRegion: '#first-region', secondRegion: '#second-region' }});//-region view with template-var MyRegionView=Mn.View.extend({ template: '#tpl-view-first-region'});//实例化var myView = new MyView();var myRegionView = new MyRegionView();//show region viewmyView.showChildView('firstRegion',myRegionView);
5. Managing Sub-views
引用官网描述
View provides a simple interface for managing sub-views with showChildView and getChildView:
(1) Showing a View
引用官网描述
To show a view inside a region, simply call showChildView(region, view)
. This will handle rendering the view’s HTML and attaching it to the DOM for you:
<!--view template--><script type="x-template/underscore" id="tpl-view-with-regions"> <div id="first-region">First region</div></script><!--subview template--><script type="x-template/underscore" id="tpl-sub-view"> <h1>Marionette says hi!</h1></script>
//创建subviewvar MySubView = Mn.View.extend({ template: '#tpl-sub-view'});//创建view,重写Rendervar MyView = Mn.View.extend({ template: '#tpl-view-with-regions', regions: { firstRegion: '#first-region' }, onRender() { this.showChildView('firstRegion', new MySubView()); }});//实例化及渲染var myView = new MyView();myView.render();//写入DOM$('body').append(myView.$el);
(2) Accessing a Child View
引用官网描述
To access the child view of a View - use the getChildView(region)
method. This will return the view instance that is current being displayed at that region, or null:
实例中template同上
var MySubView = Mn.View.extend({ template: '#tpl-sub-view', doSomething:function() { console.log('Hi, from MySubView'); }});var MyView = Mn.View.extend({ template: '#tpl-view-with-regions', regions: { firstRegion: '#first-region' }, onRender:function() { this.showChildView('firstRegion', new MySubView()); }, onSomeEvent:function() { var first = this.getChildView('firstRegion'); first.doSomething(); }});var myView = new MyView();myView.render();$('body').append(myView.$el);//在MyView中定义的onSomeEvent,此处在调用时写成some:event和someEvent均可myView.triggerMethod('some:event');
6. Organizing Your View
(1) Defining ui
引用官网描述
To define your ui hash, just set an object of key to jQuery selectors to the ui attribute of your View:
var MyView = Mn.View.extend({ template: '#my-template', ui: { save: '#save-button', close: '.close-button' }});
Inside your view, the save and close references will point to the jQuery selectors #save-button and .close-button respectively.
(2) Accessing UI Elements
引用官网描述
To get the handles to your UI elements, use the getUI(ui)
method:
<script type="x-template/underscore" id="my-template"> <button id="save-button">save</button> <button class="close-button">close</button></script>
var MyView = Mn.View.extend({ template: '#my-template', ui: { save: '#save-button', close: '.close-button' }, onDoSomething: function() { var saveButton = this.getUI('save'); saveButton.attr('disabled', 'disabled'); }});var myView = new MyView();myView.render();$('body').append(myView.$el);myView.triggerMethod('do:something');
(3) Referencing UI in events and triggers
引用官网描述
The UI attribute is especially useful when setting handlers in the events and triggers objects - simply use the @ui.
prefix:
var MyView = Mn.View.extend({ template: '#my-template', ui: { save: '#save-button', close: '.close-button' }, events: { 'click @ui.save': 'handleSave' }, triggers: { 'click @ui.close': 'close:view' }, handleSave: function() { this.model.save(); }});
7. Events
引用官网描述
The typical Backbone manner: view.on('render', function() {})
Overriding the onEvent listener methods: onRender: function() {}
(1) onEvent Listeners
var MyView = Mn.View.extend({ template: false, onRender: function() { console.log("Fired whenever view.triggerMethod('render') is called."); }, onOtherEvent: function(argument) { console.log("Fired other:event with '" + argument + "' as an argument"); }});var view = new MyView();view.triggerMethod('render');//view.render(); 亦可,注:需设置template:fasle,否则报错view.triggerMethod('other:event', 'test argument');
8. Event and Trigger Mapping
(1) View events
引用官网描述
The view events attribute binds DOM events to functions or methods on the view. The simplest form is to reference a method on the view:
<div id="view-section"> <a>here is a.</a></div>
var MyView = Mn.View.extend({ el:'#view-section', template: false, events:{ 'click a':'showModal' }, showModal:function(event){ console.log('show the modal'); }});var view = new MyView();
(2) View triggers
<div id="view-section"> <a>here is a.</a></div>
var MyView = Mn.View.extend({ el:'#view-section', template: false, triggers:{ 'click a':'link:clicked' }, //triggers中调用的事件,都要以on为前缀 onLinkClicked:function(event){ console.log('show the modal'); }});var view = new MyView();
引用官网描述
The major benefit of the triggers attribute over events is that triggered events can bubble up to any parent views.
9. Model and Collection events
(1) Model Events
var MyModel= Backbone.Model.extend({});var myModel= new MyModel({ title:'old title'});var MyView = Mn.View.extend({ model:myModel, template: false, modelEvents:{ 'change:title': 'actOnChange' }, actOnChange:function(){ console.log('new value: ' + this.model.get('title')); }});var view = new MyView();myModel.set('title','new title');
(2) Collection Events
const myCollection = new Backbone.Collection([ {title: 'Backbone.js'}, {title: 'Marionette.js'}]);const MyView = Mn.View.extend({ collection: myCollection, template: false, collectionEvents: { 'some:event': 'handleSomeEvent' }, handleSomeEvent:function() { console.log('handle some:event');}});const myView = new MyView();myView.render();myCollection.trigger('some:event');
(3) Listening to Both
引用官网描述
If your view has a model and collection attached, it will listen for events on both
const MyModel = Backbone.Model.extend();const MyCollection = Backbone.Collection.extend({ model: MyModel});const myCollection = new MyCollection([ {title: 'Backbone.js'}, {title: 'Marionette.js'}]);const myModel = new MyModel();const MyView = Mn.View.extend({ model: myModel, collection: myCollection, template: false, modelEvents: { 'change:title': 'handleChangeAttr' }, collectionEvents: { 'update': 'handleCollectionUpdate' }, handleChangeAttr() { console.log('title was changed'); }, handleCollectionUpdate() { console.log('models were added or removed in the collection'); }});const myView = new MyView();myView.render();myModel.set({'title': 'Backbone.Radio.js'});myCollection.add(myModel);
- Marionette官网学习 - View
- Marionette官网学习 - CollectionView
- Marionette官网学习 - Common Concept
- BackBone,Marionette 初步学习笔记
- marionette中的View的el id className tagName 属性
- view学习
- View学习笔记----View坐标
- 前端编程提高之旅(七)----marionette实现todoMVC
- sql2005学习笔记-VIEW
- View 学习笔记
- View学习(android)
- Android View学习示例
- oracle view 学习小结
- ApiDemo - View -Animation 学习
- Android View学习示例
- Android View学习示例
- model/view学习全
- Android学习 自定义View
- Android通过webservice连接SQLServer 详细教程(数据库+服务器+客户端)
- 线程调度的方法
- C#面向对象与常用API的学习
- ngin.conf文件配置
- poj1947 Rebuilding Roads--树形dp
- Marionette官网学习 - View
- Python 在Windows环境中备份文件 脚本程序 版本2
- mysql主键设置了递增,插入语句的写法
- Java正则取文件夹下所有匹配内容
- H5经纬度百度定位不准问题
- 你不可不知的interface(1)-引入及特点
- 【PHP部署 Linux】Linux网站架构系列之PHP部署篇
- Apache CXF REST api
- 104-string和StringBuilder的区别