目录

JavaScript

You can use a .js file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.

Syntax

The ECMAScript 6.0 syntax is supported.

Objects

Methods

Obtaining a DOM Element

  1. Use $refs to obtain a DOM element.

    <!-- index.hml -->
<div class="container">
  <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
    // index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' }
    ]
  },
  handleClick() {
        const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
    const state = animator.getState();
    if (state === 'Paused') {
      animator.resume();
    } else if (state === 'Stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

  2. Call $element to obtain a DOM element.

    <!-- index.hml -->
<div class="container" style="width:500px;height: 700px; margin: 100px;">
  <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
    // index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' }
    ]
  },
  handleClick() {
    const animator = this.$element('animator'); // Obtain the DOM element whose ID is animator.
    const state = animator.getState();
    if (state === 'Paused') {
      animator.resume();
    } else if (state === 'Stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

Obtaining the ViewModel

The following shows files of the root page:

<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
  <div class="container">
    <text>{{text}}</text>
    <parentComp></parentComp>
  </div>
</div>
// root.js
export default {
  data: {
    text: 'I am root!',
  },
}

Customize the parent component.

<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="parentClicked">parent component click</text>
  <text class="text-style" if="{{showValue}}">hello parent component!</text>
  <childComp id = "selfDefineChild"></childComp>
</div>
// parent.js
export default {
  data: {
    showValue: false,
    text: 'I am parent component!',
  },
  parentClicked () {
    this.showValue = !this.showValue;
    console.info('parent component get parent text');
    console.info(`${this.$parent().text}`);
    console.info("parent component get child function");
    console.info(`${this.$child('selfDefineChild').childClicked()}`);
  },
}

Customize the child component.

<!-- child.hml -->
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
  <text class="text-style" if="{{isShow}}">hello child component</text>
</div>
// child.js
export default {
  data: {
    isShow: false,
    text: 'I am child component!',
  },
  childClicked () {
    this.isShow = !this.isShow;
    console.info('child component get parent text');
    console.info(`${this.$parent().text}`);
    console.info('child component get root text');
    console.info(`${this.$root().text}`);
  },
}