riot.js学习【五】杂烩1

类简写

Riot提供了简要的语法，生成类名，例如：

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

只有true值，才会被生成，false值将会被忽略。生成的结果如下：

<p class="foo baz zorro"></p>

当然咯，这个特性，你可以用在其它属性上，如果你找到合适的地方的话~

给个坑爹的例子：

<h1 xxx={a: true, b: 1}></h1>

当然生成的，也是坑爹的：

<h1 xxx="a b"></h1>

---

括号转义

经过转义后，可以输出”{“和”}”。

\{ 这里的表达式，将不会执行 \}

将输出：

{ 这里的表达式，将不会执行 }

---

自定义括号

我们可以自由的定义读值的 括号，就类似：

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

中间的空格，就是放置表达式值的地方

---

绑定未转义的HTML

Riot的表达式，只能绑定除了HTML的文本值。但是，你可以通过自定义标签，来绑定HTML内容。如：

    <raw>
        <span></span>

        // 把这个标签的HTML，设为参数的content值
        this.root.innerHTML = opts.content;
    </raw>

有了上面的自定义标签后，你可以在其它标签里，镶入HTML内容了：

    <todo>
        <p>
            这里有一些HTML的内容——
            <raw content="{ html }"></raw>
        </p>

        this.html = '我叫:<strong>da宗熊</strong>';
    </todo>

You can see，todo标签，镶嵌了raw标签。这是Riot里一个非常有趣的东西。

---

嵌套的HTML

Riot里，有个很重要的标签，叫 <yield />
它能把使用中标签内嵌的HTML，放在标签定义内部。

如，有一个标签定义：

    <my-tag>
        <!-- 这里使用了yield标签 -->
        <p>Hello <yield/></p>
        this.text = 'world'
    </my-tag>

如果这样使用：

    <my-tag>
        <!-- 这部分内容，会替换掉<yield />标签 -->
        <b>{ text }</b>
    </my-tag>

得出的结果如下：

<my-tag>
    <p>Hello <b>world</b></p>
</my-tag>

---

有name或id的元素

如果自定义标签内，元素带有 id 或 name ，这些元素，会自动绑定到标签内容的 context 上，我们可以很简单的通过javascript，获取到这些元素进行操作：

    <login>
        <form id="login" onsubmit={ submit }>
            <input name="username">
            <input name="password">
            <button name="submit">
        </form>

        // 上面的元素，已经绑定到this对象中了
        var form = this.login,
            username = this.username.value,
            password = this.password.value,
            button = this.submit

    </login>

当然咯，这些带有 name 或 id 的元素，也可以在标签的HTML内使用，例如：

<div>{ username.value }</div>

---

事件处理

Riot标签的事件定义，可以通过简单的方式进行绑定:

    <login>
        <form onsubmit={ submit }></form>

        // 表单的提交，会运行下面的submit方法
        submit(e) {

        }
    </login>

如果属性以“on”开头，例如： onclick, onsubmit, oninput等等，它们都接受一个函数，来处理对应的事件。

这种函数，甚至可以根据表达式的值，动态的进行绑定:

<form onsubmit={ condition ? mA : mB}></form>

如果条件成立，onsubmit执行mA，否则执行mB。

在Roit中，绑定的所有事件处理的函数，它们的默认事件，都被自动取消掉，除非你绑定的元素，是checkbox或者radio。

这意味着， e.preventDefault() 已经替你自动执行了，因为我们经常那么干~，so，Riot已经帮我们自动取消了默认事件。

当然，我们可以在事件处理函数中，return true；来让默认事件正常触发。

---

Event对象

在所有的事件处理函数中，第一个参数，就是event对象。每个event对象，含有下面几个属性：

• e.currentTarget 指向事件触发的那个元素

• e.target 事件起源的元素，呃，跟e.currentTarget一样

• e.which 键盘事件中的按键值【key code】

• e.item 当前each循环中，元素绑定的this对象