riot.js learning [5] Chowder 1-JS Tutorial-php.cn

riot.js learning [5] Chowder 1

黄舟

Release： 2017-01-16 16:14:04

Original

1043 people have browsed it

Class abbreviation

Riot provides a brief syntax to generate class names, for example:

[code]<p class={ foo: true, bar: 0, baz: new Date(), zorro: &#39;a value&#39; }></p>

Copy after login

Only true values will be generated, false values will be ignored. The generated results are as follows:

[code]<p class="foo baz zorro"></p>

Copy after login

Of course, you can use this feature on other attributes, if you find a suitable place~

Give me a cheating example:

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

Copy after login

Of course it is generated, but it is also a scam:

[code]<h1 xxx="a b"></h1>

Copy after login

Bracket escaping

After escaping, "{" and "}" can be output.

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

Copy after login

will output:

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

Copy after login

Custom brackets

We can freely define the brackets for reading values, just like:

[code]riot.settings.brackets = &#39;${ }&#39;
riot.settings.brackets = &#39;{{ }}&#39;

Copy after login

The space in the middle, It is the place where the expression value is placed

Binds unescaped HTML

Riot's expression can only bind text values other than HTML. However, you can bind HTML content through custom tags. For example:

[code]    <raw>
        <span></span>

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

Copy after login

After you have the above custom tag, you can embed HTML content in other tags:

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

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

Copy after login

You can see that the todo tag is embedded with the raw tag. This is a very interesting thing in Riot.

## Nested HTML

In Riot, there is a very important tag called

It can put the HTML embedded in the tag in use inside the tag definition.

For example, there is a tag definition:

[code]    <my-tag>
        <!-- 这里使用了yield标签 -->
        <p>Hello <yield/></p>
        this.text = &#39;world&#39;
    </my-tag>

Copy after login

If used like this:

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

Copy after login

The result is as follows:

[code]<my-tag>
    <p>Hello <b>world</b></p>
</my-tag>

Copy after login

Elements with name or id

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

[code]    <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>

Copy after login

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

[code]<div>{ username.value }</div>

Copy after login

事件处理

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

[code]    <login>
        <form onsubmit={ submit }></form>

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

        }
    </login>

Copy after login

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

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

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

Copy after login

如果条件成立，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对象

以上就是riot.js学习【五】杂烩1的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！