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指令會產生臨時作用域