riot.js learning [4] Expression + Boolean attribute

Expression

In riot.js, html tags can use more powerful expressions to set values.
Expressions can be used in innerText, attributes, and are 100% original JavaScript syntax.

Give me a few small examples:

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

The usage methods are also quite rich:

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

riot.js expressions can make your html as clean and efficient as possible .

Of course, if your expression is too complex, you can consider placing the calculation in the update event, or using a separate calculation method.

 <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>

The output is as follows:

Boolean attributes

Attributes such as checked, selected, etc. are called in roit.js Boolean properties.

If the expression value of the Boolean attribute is false, the attribute will be ignored:

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

will be generated:

<input name="false" ><input >

The W3C specification states that as long as the Boolean attribute exists, then it must be true, even if its value is even false, it is still true.
To put it simply, even if we set checked=false, the final effect shown by the browser is still checked.

In view of this, roit.js has optimized the Boolean attribute when generating it. If it is a Boolean attribute and its expression satisfies the conditions:

{ value == false }

will not Generate this Boolean property.

Beginner’s Encounter

Property Settings

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

Such settings are prohibited, and the generated code will be like this:

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

means complete I don't understand. Is there any problem?

Double quotes

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

Looks normal, is there anything wrong?

But the result code is:

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

Again, riot.js has a grudge against double quotes! ! ! ! [In most cases]

The above is the content of riot.js learning [4] Expression + Boolean attribute. For more related content, please pay attention to the PHP Chinese website (www. php.cn)!