Marionette官网学习 - View

注：实例中省略了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>

//构建View
var MyView=Mn.View.extend({
    template: '#template-layout'
});

//实例化View
var myView = new MyView();

//渲染
myView.render();

//添加到页面
$('body').append(myView.$el);

3. Managing an Existing Page

<div id="base-element">
    <h1>Hello, world</h1>
</div>

//创建View
var 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 regions
var 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 view
myView.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>

//创建subview
var MySubView = Mn.View.extend({
    template: '#tpl-sub-view'
});
//创建view，重写Render
var 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);