Backbone.marionette新手入门系列

已经不用了，所以弃坑。

initialize(options, args...)

const MyObject = MnObject.extend({
  initialize(options, arg2) {
    console.log(options.foo, this.getOption('foo'), arg2);
  }
});

const myObject = new MyObject({ foo: 'bar' }, 'baz'); // logs "bar" "bar" "baz"

extend

// Backbone.extend === _.extend
const view = new MyView();

triggerMethod(methodName, args...)

const MyObject = MnObject.extend({
  initialize(){
    this.triggerMethod('foo', 'baz');
  },
  onFoo(bar){
    console.log(bar);
  }
});

const myObj = new MyObject(); // console.log "baz"

myObj.triggerMethod('foo', 'qux'); // console.log "qux"

bindEvents(entity, events)

import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  fooEvents: {
    'change:foo': 'doSomething'
  },
  initialize(){
    this.fooChannel = Radio.channel('foo');
    this.bindEvents(this.fooChannel, this.fooEvents);
  },
  doSomething(){
    // the "change:foo" event was fired from the radio channel
    // respond to it appropriately, here.
  }
});

unbindEvents(entity, [hashMap])

bindRequests(entity, hashMap)

bindRequests:应该叫bindReply更贴切，绑定的是响应处理函数

hashMap => { 'request:name': 'replyHandler' }

unbindRequests(channel, [hashMap])

{ 'request:name': 'replyHandler' }

normalizeMethods(hashMap)

const hash = {
      'action:one': 'handleActionOne', // This will become a reference to `this.handleActionOne`
      'action:two': this.handleActionTwo
    };

this.normalizedHash = this.normalizeMethods(hash);

getOption(optionName)

获取定义在instance上的option，如果instance没有，则优雅降级从option上查找。

const View = View.extend({
  classVal: 'class value',
  initialize(){
    this.instanceVal = 'instance value'
  }
});

const view = new View({ optVal: 'option value' });

view.getOption('instanceVal'); // instance value
view.getOption('classVal'); // class value
view.getOption('optVal'); // option value

const view2 = new View({ instanceVal: 'foo', classVal: 'bar', optVal: 'baz' });

view.getOption('instanceVal'); // foo
view.getOption('classVal'); // bar
view.getOption('optVal'); // baz

Falsey values

getOption将返回任何falsey values而不是undefined，如果getOption在options中无法获取属性，将会直接从instance实例中读取。

mergeOptions(options, props)

把options中的props中的属性合并到instances实例上

const MyObject = MnObject.extend({
  initialize(options) {
    //
    this.mergeOptions(options, ['model', 'something']);
    // this.model and this.something will now be available
  }
});

const myObject = new MyObject({
  model: new Backbone.Model(),
  something: 'test',
  another: 'value'
});

console.log(myObject.model);
console.log(myObject.something);
console.log(myObject.getOption('another'));

options

initialize中的options和对象instance实例化的options一样，所以在initialize中使用options，有必要使用getOption获取.

const MyObject = MnObject.extend({
  options: {
    foo: 'bar',
    another: 'thing'
  },

  initialize(options) {
    console.log(options.foo) // undefined
    console.log(this.getOption('foo')) // 'bar'
    console.log(this.getOption('another')) // 'value'
  }
});

const myObject = new MyObject({
  another: 'value'
});

Marionette.View

属性：

el, id, tagName,attributes,className

model, modelEvents, collection, collectionEvents

events, triggers

template, templateContext

childViewEventPrefix,childViewEvents, childViewTriggers

behaviors, ui

regionClass, regions

注意：

因为所有的events都在el上代理，所以如果events中的selector和childViewEvents中的selector相同时，events中的handle能够同时响应events和childViewEvents中触发的事件，解决这个问题很简单，在childViewEvents的handler中阻止事件冒泡传播

render

Marionette.View.render不能被override重写，只能通过before:render

events

Backbone用来绑定DOM事件

triggers

转换DOM事件=>Marionette Event，就是把DOM Event变为通用的发布订阅事件，这样外部对象就和具体的DOM结构解耦

场景适用：childViewEvents => parentView主要是解决父子view之间的事件传递.

作用：类似Backbone.Model对象，自身定义了很多Entity Event，entity event会在model的属性变化时触发；而triggers中定义的就是DOM事件到Class Event的一个映射关系，所以handler，可以是view内部（和events效果一样），或者外部其它的Marionette对象也可以处理。

const MyView = View.extend({
  triggers: {
    'click a': 'click:link'
  },

  onClickLink(view, event) {
    console.log('Show the modal');
  }
});

// 也可以手动触发
MyView.triggerMethod('click a'); // onClickLink

childViewEvents

ui

就是query出view context渲染之后的范围内DOM Element（this.$(selector)）