riot.js教程【四】Mixins、HTML内嵌表达式

前文回顾

riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期；

riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法；

riot.js教程【一】简介；

共享Mixins

混合开发可以使你很好的复用代码，如下所示：

var OptsMixin = {
  // the `opts` argument is the option object received by the tag as well
  init: function(opts) {
    this.on('updated', function() { console.log('Updated!') })
  },

  getOpts: function() {
    return this.opts
  },

  setOpts: function(opts, update) {
    this.opts = opts
    if (!update) this.update()
    return this
  }
}

<my-tag>
  <h1>{ opts.title }</h1>

  this.mixin(OptsMixin)
</my-tag>

在上面这个示例中，你给页面中所有的my-tag标签增加了两个实例方法

getOpts和setOpts

来看下面的示例

var my_tag_instance = riot.mount('my-tag')[0]

console.log(my_tag_instance.getOpts()) // will log out any opts that the tag has

另外，init方法是一个特殊的方法，

当一个riot标签加载一个mixin对象时，会执行init方法

init方法不是标签的实例方法，它是不可访问的

上面例子中，我们已经为my-tag设计了一个mixin对象OptsMixin，

那么我们想为这个对象补充一个方法该如何做呢？如下：

function IdMixin() {
  this.getId = function() {
    return this._id
  }
}

var id_mixin_instance = new IdMixin()

<my-tag>
  <h1>{ opts.title }</h1>

  this.mixin(OptsMixin, id_mixin_instance)
</my-tag>

所以一个mixin对象可以是一个json对象，

也可以是一个方法的实例

全局的mixins

如果你需要为你所有的标签扩展方法

你就可以使用全局mixins

riot.mixin(mixinObject)

与共享mixins不同，全局mixins会直接被所有的标签加载；

要谨慎使用全局的mixins

HTML内嵌表达式

可以在HTML内部嵌入用大括号包裹的JS表达式，

大括号包裹的JS表达式既可以被用于文本标签，也可以被用于HTML属性

<h3 id={ /* attribute_expression */ }>
  { /* nested_expression */ }
</h3>

下面举几个例子：

{ title || 'Untitled' }
{ results ? 'ready' : 'loading' }
{ new Date() }
{ message.length > 140 && 'Message is too long' }
{ Math.round(rating) }

为了使你的HTML标签保持clean

建议原则是尽量使用简洁的JS表达式

如果你的表达式演变的越来越复杂了

那么考虑把表达式里的一些逻辑转义到update事件中去，如下

<my-tag>

  <!-- the `val` is calculated below .. -->
  <p>{ val }</p>

  // ..on every update
  this.on('update', function() {
    this.val = some / complex * expression ^ here
  })
</my-tag>

HTML标签中，拥有布尔值的属性，比如checked, selected这类属性

当表达式的值为false的时候，这些属性是不会添加到HTML标签中的

下面两行代码是等价的

<input checked={ null }>

<input>

W3C规定，这类属性，就算你没给它设置值，只要他出现在HTML标签内，那么它就等价于给这类属性设置了true的值

再来看下面这行代码

<p class={ foo: true, bar: 0, baz: new Date(), zorro: 'a value' }></p>

这个标签的类名经过计算后是：foo baz zorro

因为bar的值是0，0就是false，只有值是true的才会被应用到标签上

这个特性不一定用于class，还可以用在别的地方

你还可以直接这样写：

<my-tag>
  <p class={ classes }></p>
  <script>
    hasAnimation() {
      return true
    }

    this.randomNumber = 5

    this.classes = {
      foo: true,
      bar: false,
      number: '3 > randomNumber',
      animated: 'hasAnimation()', //注意：这里要写成字符串的形式
      baz: new Date(),
      zorro: 'a value'
    }
  </script>
</my-tag>

经过计算后P的样式类有foo number animated baz zorro

HTML标签的行内样式也可以写成类似这样

<my-tag>
  <p style={ styles }></p>
  <script>
    this.styles = {
      color: 'red',
      height: '10rem'
    }
  </script>
</my-tag>

riotjs会自动把对象转换成描述样式的字符串

<p style="color: red; height: 10rem"></p>

那么如何打印大括号到浏览器呢？可以用下面这种方式：

\\{ this is not evaluated \\}

你如果不喜欢用大括号来告诉riotjs哪行代码是你的表达式

你可以通过配置改变这一点：

riot.settings.brackets = '${    }'
riot.settings.brackets = '\{\{    }}'

注意，标注之间要用一个空格隔开

riotjs的表达式，只能输出（渲染）纯文本的字符串值；

不能输出（渲染）HTML的字符串值

但是，你可以通过变通的方式完成这项工作，如下：

<raw>
  <span></span>

  this.root.innerHTML = opts.content
</raw>

<my-tag>
  <p>Here is some raw content: <raw content="{ html }"/> </p>

  this.html = 'Hello, <strong>world!</strong>'
</my-tag>

注意，这样做很容易受到跨站脚本攻击，千万不要加载不受你控制的数据；