6. 组件 -- Highway MVVM

6-1. 自定义

通过Highway.extend抽取为类，需指定标签名

6-1-1. 全局

通过Highway.component指定

6-1-2. 局部

通过View.$components指定

6-1-3. 示例

<!-- examples/components/customized.html -->

<div id="app">
  <p>i am {{name}}</p>
  <my-component hi-ref="component" class="component"></my-component>
</div>

<script id="t-my-component" type="text/template">
  <p>i am {{name}}</p>
</script>

const myComponent = Highway.extend({
  $template: $('#t-my-component').html(),
  $scope: {
    name: 'component'
  }
});

// 全局
//Highway.component('my-component', myComponent);

const app = new Highway({
  $el: $('#app'),
  $scope: {
    name: 'app'
  },
  // 局部
  $components: {
    'my-component': myComponent
  }
});

6-2. 引用

6-2-1. 子视图

父视图通过$refs[‘name’]获取子视图上下文，子视图需指定hi-ref指令

<!-- examples/components/ref.html -->

<div id="app">
  <p>i am {{name}}</p>
  <my-component hi-ref="component" class="component"></my-component>
  <button hi-on:click="getComponentName">getComponentName</button>
  <button hi-on:click="triggerComponentHandler">triggerComponentHandler</button>
</div>

<script id="t-my-component" type="text/template">
  <p>i am {{name}}, my parent is {{$parent.name}}</p>
</script>

const myComponent = Highway.extend({
  $template: $('#t-my-component').html(),
  $scope: {
    name: 'component'
  },
  introduce() {
    alert('hi, i am component');
  }
});

const app = new Highway({
  $el: $('#app'),
  $scope: {
    name: 'app'
  },
  $components: {
    'my-component': myComponent
  },
  getComponentName() {
    const $component = this.$components.$refs['component'];

    alert($component.$get('name'));
  },
  triggerComponentHandler() {
    const $component = this.$components.$refs['component'];
    $component.introduce();
  }
});

6-2-2. 父视图

子视图通过$parent获得父视图上下文

<!-- examples/components/parent.html -->

<div id="app">
  <p>i am {{name}}</p>
  <my-component class="component"></my-component>
</div>

<script id="t-my-component" type="text/template">
  <p>i am {{name}}, my parent is {{$parent.name}}</p>
  <button hi-on:click="getParentName">getParentName</button>
  <button hi-on:click="triggerParentHandler">triggerParentHandler</button>
</script>

const myComponent = Highway.extend({
  $template: $('#t-my-component').html(),
  $scope: {
    name: 'component'
  },
  getParentName() {
    alert(this.$parent.$get('name'));
  },
  triggerParentHandler() {
    this.$parent.introduce();
  }
});

const app = new Highway({
  $el: $('#app'),
  $scope: {
    name: 'app'
  },
  $components: {
    'my-component': myComponent
  },
  introduce() {
    alert('hi, i am app');
  }
});

6-3. 通信

6-3-1. $on

监听事件，需指定事件名与处理函数，返回停止监听

<!-- examples/components/event.html -->

this.$on('app:event', this.eventHandler.bind(this));

// stop listening if stopper is called
//stopper()

6-3-2. $off

关闭监听，需指定事件名与处理函数，如处理函数不指定，关闭在该事件上的所有处理器

<!-- examples/components/event.html -->

this.$off('app:event');

6-3-2. $broadcast

广播事件，向子视图发送通知消息

<!-- examples/components/event.html -->

this.$broadcast('app:event', 'this is event from app');

6-3-3. $emit

冒泡事件，向父视图发送通知消息

<!-- examples/components/event.html -->

this.$emit('component:event', 'this is event from component');

6-3-4. $fire

触发自身事件，并不会触发$broadcast、$emit

<!-- examples/components/event.html -->

this.$fire('component:self', 'this is event from self');

6-3-5. $listenTo

监听指定对象事件，指定对象通过$fire触发事件

<!-- examples/components/listen.html -->

const $component = this.$components.$refs['component'];
const stopper = this.$listenTo($component, 'component:event', this.eventHandler.bind(this));

// stop listening if stopper is called
//stopper()      

6-3-6. $listenToOnce

监听一次指定对象事件，指定对象通过$fire触发事件

<!-- examples/components/listen.html -->

const stopper = this.$listenToOnce($component, 'component:event', this.eventHandler.bind(this));

// stop listening if stopper is called
//stopper()

6-3-7. $stopListening

取消监听指定对象事件

<!-- examples/components/listen.html -->

const $component = this.$components.$refs['component'];
this.$stopListening($component, 'component:event');

6-4. 作用域链

视图与子视图作用域(不同于上下文)相互隔离，可通过$parent中获取作用域

<!-- examples/components/scope.html -->

<div id="app">
  <p>i am {{name}}</p>
  <my-component class="component"></my-component>
</div>

<script id="t-my-component" type="text/template">
  <p>i am {{name}}, my parent is {{$parent.name}}</p>
</script>

name属性值只会从当前上下文作用域获取值，如遇空值并不会自动向父组件寻找，如需向上寻找添加$parent前缀。

参考如下name取值

view- child	view-parent	hi, i am {{name}}, my parent is {{$parent.name}}
’ child’	‘parent’	hi, i am child, my parent is parent
undefined	‘parent’	hi, i am , my parent is parent
‘child’	undefined	hi, i am child, my parent is
undefined	undefined	hi, i am , my parent is

repeat指令会产生临时作用域