Heim > Artikel > Web-Frontend > riot.js learning [7] Skript zum Erstellen von Tags
Tags erstellen
In Riot erstellen wir benutzerdefinierte Tags über HTML-Code, aber tatsächlich wird das endgültige ausführbare benutzerdefinierte Tag in ein Skript kompiliert.
Tatsächlich ein Stück benutzerdefinierter Tag-Code wie dieser:
<script type="riot/tag"> <todo> <h1>{ title }</h1> this.title = opts.title || "da宗熊"; </todo></script>
Nach der Kompilierung wird daraus ein wirklich ausführbares Skript, wie folgt:
riot.tag('todo', '<h1>{ title }</h1>', function(opts) { this.title = opts.title || "da宗熊"; });
riot.tag hat drei erforderliche Parameter:
riot.tag('标签名', '模版内容', 初始化函数);
Es gibt zwei optionale Parameter, nämlich Stil und Attribute:
riot.tag('标签名', '模版内容', '样式', fn); 或:riot.tag('标签名', '模版内容', '属性', fn); 或:riot.tag('标签名', '模版内容', '样式', '属性', fn);
Stil:
Der Inhalt des Stils wird in einem Style-Tag im Kopf platziert.
Die korrekte Schreibweise des Stils lautet also wie folgt:
riot.tag('todo', '<p class="title">{opts.title}</p>', '.title{color:#ff0;}', function(opts){ // todo something});
Der Stil muss den vollständigen Selektor und den zugehörigen Stil schreiben.
Attribut: Der Inhalt des
-Attributs wird schließlich in context.opts widergespiegelt. Die korrekte Schreibweise des Attributs ist wie folgt:
riot.tag('todo', '<p>{ opts.title }</p>', 'title="da宗熊" age="26"', function(opts){ // todo something});
Begegnung für Neulinge Fallstricke
Auf der offiziellen Website heißt es, dass Attributausdrücke in Anführungszeichen stehen müssen, wie zum Beispiel: value=“{ val }“ anstelle von value={ val } [ABER persönlich getestete Version 2.1, es gibt keinen Unterschied, kann es jemand erklären? 】
Boolesches Attribut: __checked="{ isTrue }" anstelle von geprüft={ isTrue }【Das ist ein absolutes Muss! 】
Der src des img-Tags wird am besten als riot-src geschrieben, um falsche Anfragen zu vermeiden
Verwenden Sie riot-style statt style für Kompatibilität mit ie
Das Obige ist riot.js learning [7] Der Inhalt von Skripterstellungs-Tags finden Sie auf der chinesischen PHP-Website (www.php.cn).