riot.js 학습 [세] 이벤트-JS 튜토리얼-php.cn

riot.js 학습 [세] 이벤트

黄舟

풀어 주다： 2017-01-16 16:04:07

원래의

1623명이 탐색했습니다.

컴파일부터 생성, 최종 소멸까지 각 사용자 정의 태그에 대해 riot.js는 해당 이벤트를 제공합니다.

4개의 내장 이벤트가 있습니다.

update

는 레이블이 실제로 UI를 새로 고치기 전에 실행됩니다. 라벨 UI가 업데이트된 후

updated

가 실행되기 전에 컨텍스트 데이터를 다시 작성할 수 있습니다. 이때 dom

mount

를 조작하고, 태그를 빌드하여 페이지에 배치한 후 실행하면 됩니다.

unmount

페이지에서 태그가 제거될 때 실행됩니다. [this.unmount() 호출 시 일반적으로 실행]

예:

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>

    <todo></todo>

</body>

<!-- 最前面一定要有空格或TAB -->
<script type="riot/tag">
    <todo>
        <p>一个自定义标签 BY { title || "" }</p>

        // 监听4种事件
        // 执行顺序，跟绑定顺序无关
        this.on("updated", function(){
            // 这里可以操纵DOM
            console.log("updated");
        }).on("mount", function(){
            console.log("mount");
        }).on("unmount", function(){
            console.log("unmount");
        }).on("update", function(){
            // 这里可以注入数据
            this.title = "da宗熊";
            console.log("update");
        });
    </todo>
</script>

<script type="text/javascript">
    riot.mount("todo");
</script>
</html>

로그인 후 복사

효과는 다음과 같습니다.

riot.js 학습 [세] 이벤트

출력은 각각 다음과 같습니다. 업데이트 -> 업데이트됨 -> mount

this.unmount()

가 호출되지 않았으므로 unmount

이벤트 바인딩이 수행되지 않았습니다. jquery와 마찬가지로 여러 이벤트를 한 번에 바인딩하거나 이벤트를 직접 트리거할 수도 있습니다.

여러 이벤트 바인딩:

[code]this.on("update mount", function(){
    // update和mount都会经过这里
});

로그인 후 복사

이벤트 트리거:

[code]this.trigger("update", "参数1", "参数2"...);

로그인 후 복사

초보자의 함정:

this.unmount() 이후에 실행되는 마운트 해제 이벤트 또는 사용자 정의된 레이블이 다시 빌드할 때 자동으로 실행되는

[code]riot.mount("todo");
riot.mount("todo"); // 第二次会先触发unmount，然后才是update/updated/mount

로그인 후 복사

첫 번째 매개변수 event

[code]this.on("update", function(a, b){
    console.log(a, b); // 1, 2
});
this.trigger("update", 1, 2);

로그인 후 복사

가 아닌 이벤트 콜백

jquery와 많이 다릅니다

위는 riot.js 학습[3] 이벤트 내용입니다. PHP 중국어 웹사이트(www.php.cn)를 주목하세요!