Riot. js learning [5] hodgedge 1

Riot. js learning [5] Miscellaneous 1. Riot provides a brief syntax to generate class names, for example:

Abbreviated category

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

[code]

Only true values are generated. false values are ignored. The result is as follows:

[code]

Of course, you can use this feature in other attributes. If you find a suitable one ~

For example:

[code]

Of course, the generation is also pitfall:

[code]

Parentheses escape

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

[Code] \ {the expression here will not execute \}

Output:

[Code] {the expression here will not be executed}

Custom brackets

We can freely define the parentheses of the read value, just like:

[code]riot.settings.brackets = '${ }'riot.settings.brackets = '{{ }}'

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

Bind unescaped HTML

Riot expressions can only be bound to text values except HTML. However, you can use custom tags to bind HTML content. For example:

[Code]
 
  
// Set the HTML of this tag as the parameter's content value this. root. innerHTML = opts. content;
 

With the above custom tag, you can insert HTML content into other tags:

[Code]
         
  
Here are some HTML content --
           
This.html = 'My name is:
  Da zongxiong';
 

You can see and todo tags are embedded with raw tags. This is a very interesting thing in Riot.

Nested HTML

There is a very important tag in Riot called

It can put the HTML embedded in the tag definition.

For example, there is a tag definition:

[Code]
         
          
  
Hello
   
This. text = 'World'
 

If you use this method:

[Code]
         
          
  {Text}    
 

The result is as follows:

[code]
     
  
Hello world
 

Element with name or id

If an element in a custom tag has an id or name, these elements are automatically bound to the context of the TAG content. We can obtain these elements through javascript For operations:

[Code]
 
  
// The above element has been bound to the var form = this object. login, username = this. username. value, password = this. password. value, button = this. submit
 

Of course, these elements with names or IDS can also be used in the HTML of tags, for example:

[code]
{ username.value }

Event Processing

The Riot tag event definition can be bound in a simple way:

[Code]
 
  
// For Form submission, the following submit (e) method will be run ){}
 

If attributes start with "on", such as onclick, onsubmit, and oninput, they all accept a function to process corresponding events.

Such functions can even be dynamically bound based on the value of the expression:

[code]

If the condition is true, onsubmit executes mA; otherwise, mB is executed.

In Roit, all bound event processing functions and their default events are automatically canceled unless the elements you bind are checkbox or radio.

This means that e. preventDefault () has been automatically executed for you, because we often do this ~, So, Riot has automatically canceled the default event for us.

Of course, we can return true; In the event processing function to enable the default event to be triggered normally.

Event object

Among all event processing functions, the first parameter is the event object. Each event object contains the following attributes:

E. currentTarget points to the element triggered by the event.

E.tar get event origin element, er, same as e. currentTarget

E. key code in the which keyboard event]

E. item in the current each loop, this object bound to the element

The above is the content of riot. js learning [5] hodgedge 1. For more information, please follow the PHP Chinese Network (www.php1.cn )!