首页 > web前端 > js教程 > riot.js学习【五】杂烩1

riot.js学习【五】杂烩1

黄舟
发布: 2017-01-16 16:14:04
原创
1023 人浏览过

类简写

Riot提供了简要的语法,生成类名,例如:

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

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

[code]<p class="foo baz zorro"></p>
登录后复制

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

给个坑爹的例子:

[code]<h1 xxx={a: true, b: 1}></h1>
登录后复制

当然生成的,也是坑爹的:

[code]<h1 xxx="a b"></h1>
登录后复制

括号转义

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

[code]\{ 这里的表达式,将不会执行 \}
登录后复制

将输出:

[code]{ 这里的表达式,将不会执行 }
登录后复制

自定义括号

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

[code]riot.settings.brackets = &#39;${ }&#39;
riot.settings.brackets = &#39;{{ }}&#39;
登录后复制

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

绑定未转义的HTML

Riot的表达式,只能绑定除了HTML的文本值。但是,你可以通过自定义标签,来绑定HTML内容。如:
[code]    <raw>
        <span></span>

        // 把这个标签的HTML,设为参数的content值
        this.root.innerHTML = opts.content;
    </raw>
登录后复制
有了上面的自定义标签后,你可以在其它标签里,镶入HTML内容了:
[code]    <todo>
        <p>
            这里有一些HTML的内容——
            <raw content="{ html }"></raw>
        </p>

        this.html = &#39;我叫:<strong>da宗熊</strong>&#39;;
    </todo>
登录后复制

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

嵌套的HTML

Riot里,有个很重要的标签,叫

它能把使用中标签内嵌的HTML,放在标签定义内部。

如,有一个标签定义:

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

如果这样使用:

[code]    <my-tag>
        <!-- 这部分内容,会替换掉<yield />标签 -->
        <b>{ text }</b>
    </my-tag>
登录后复制

得出的结果如下:

[code]<my-tag>
    <p>Hello <b>world</b></p>
</my-tag>
登录后复制

有name或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>
登录后复制

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

[code]<div>{ username.value }</div>
登录后复制

事件处理

Riot标签的事件定义,可以通过简单的方式进行绑定:
[code]    <login>
        <form onsubmit={ submit }></form>

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

        }
    </login>
登录后复制
如果属性以“on”开头,例如: onclick, onsubmit, oninput等等,它们都接受一个函数,来处理对应的事件。

这种函数,甚至可以根据表达式的值,动态的进行绑定:
[code]<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对象

以上就是riot.js学习【五】杂烩1的内容,更多相关内容请关注PHP中文网(www.php.cn)!



相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板