riot.js 학습 [4] 표현식 + 불리언 속성

표현식

riot.js에서 html 태그는 값을 설정하기 위해 더욱 강력한 표현식을 사용할 수 있습니다.
표현식은 innerText, 속성에 사용할 수 있으며 100% 원본 JavaScript 구문입니다.

몇 가지 작은 예를 들어보세요:

<h3 id={ /* 属性表达式 */ }>
    { /*这里可以写表达式*/ }</h3>

사용 방법도 매우 다양합니다.

{ title || 'da宗熊' }
{ isReady ? 'ready' : 'loading' }
{ new Date() }
{ this.getName() }
{ Math.round(10) }
{ message.length > 100 && '消息太长了~' }

riot.js의 표현은 HTML을 최대한 깔끔하고 효율적으로 만들 수 있습니다.

물론 표현식이 너무 복잡하다면 업데이트 이벤트에 계산을 넣거나 별도의 계산 방법을 사용하는 것도 고려해 볼 수 있습니다.

 <todo>
        <!-- value的计算很复杂 -->
        <p>{ value }</p>
        <p>{ this.getText(this.text) }</p>

        // 计算复杂的表达式
        this.on("update", function(){
            var d = new Date();
            this.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
        });
        this.text = "da宗熊";

        // getText方法，会依赖于this对象下
        getText(text){
            return "你好" + text;
        }    </todo>

출력은 다음과 같습니다.

부울 속성

checked, selected 등과 같은 속성은 roit에서 호출됩니다. Node.js 부울 속성.

부울 속성의 표현식 값이 false인 경우 속성은 무시됩니다.

<!-- 普通属性 -->
<input name={ false } >
<!-- Boolean属性 -->
<input checked={ null } >

가 생성됩니다.

<input name="false" ><input >

W3C 사양에서는 부울 속성이 존재하면 true여야 하며, 값이 false이더라도 여전히 true입니다.
간단히 말하면 selected=false로 설정하더라도 브라우저에 표시되는 최종 효과는 여전히 확인됩니다.

이를 고려하여 roit.js는 부울 속성을 생성할 때 해당 속성을 최적화했으며 해당 표현식이 조건을 만족하는 경우

{ value == false }

는 이 부울 속성을 생성하지 않습니다.

초보가 함정에 부딪히다

속성 설정

<input value={ name } { isCheck ? &#39;checked&#39; : &#39;&#39; } />

이러한 설정은 금지됩니다. 생성된 코드는 다음과 같습니다.

<input {="" true="" ?="" &#39;checked&#39;="" :="" &#39;&#39;="" }="">

는 완료를 의미합니다. 이해가 안 돼요. 문제가 있나요?

큰따옴표

<input name={ "da宗熊" } >

정상으로 보이는데 무슨 문제라도 있는 걸까요?

그러나 결과 코드는 다음과 같습니다.

<input da宗熊"="" }"="" name="{ ">

다시 한번 riot.js는 큰따옴표에 대한 불만을 가지고 있습니다! ! ! ! [대부분의 경우]

위는 riot.js 학습 내용입니다. [4] Expression + Boolean 속성 관련 내용은 PHP 중국어를 참고해주세요. 홈페이지(www.php.cn)!