前文回顧
riot.js教程【三】訪問DOM元素、使用jquery、mount輸入參數、riotjs標簽的生命周期；
riot.js教程【二】組件撰寫準則、預處理器、標簽樣式和裝配方法；
riot.js教程【一】簡介；
共享Mixins
混合開發可以使你很好的復用代碼，如下所示：
var OptsMixin = {// the `opts` argument is the option object received by the tag as wellinit: function(opts) {this.on('updated', function() { console.log('Updated!') })},getOpts: function() {return this.opts},setOpts: function(opts, update) {this.opts = optsif (!update) this.update()return this}
}<my-tag><h1>{ opts.title }</h1>this.mixin(OptsMixin)
</my-tag>在上面這個示例中，你給頁面中所有的my-tag標簽增加了兩個實例方法
getOpts和setOpts
來看下面的示例
var my_tag_instance = riot.mount('my-tag')[0]console.log(my_tag_instance.getOpts()) // will log out any opts that the tag has
另外，init方法是一個特殊的方法，
當一個riot標簽加載一個mixin對象時，會執行init方法
init方法不是標簽的實例方法，它是不可訪問的
上面例子中，我們已經為my-tag設計了一個mixin對象OptsMixin，
那么我們想為這個對象補充一個方法該如何做呢？如下：
function IdMixin() {this.getId = function() {return this._id}
}var id_mixin_instance = new IdMixin()<my-tag><h1>{ opts.title }</h1>this.mixin(OptsMixin, id_mixin_instance)
</my-tag>所以一個mixin對象可以是一個json對象，
也可以是一個方法的實例
全局的mixins
如果你需要為你所有的標簽擴展方法
你就可以使用全局mixins
riot.mixin(mixinObject)與共享mixins不同，全局mixins會直接被所有的標簽加載；
要謹慎使用全局的mixins
HTML內嵌表達式
可以在HTML內部嵌入用大括號包裹的JS表達式，
大括號包裹的JS表達式既可以被用于文本標簽，也可以被用于HTML屬性
<h3 id={ /* attribute_expression */ }>{ /* nested_expression */ }
</h3>下面舉幾個例子：
{ title || 'Untitled' }
{ results ? 'ready' : 'loading' }
{ new Date() }
{ message.length > 140 && 'Message is too long' }
{ Math.round(rating) }為了使你的HTML標簽保持clean
建議原則是盡量使用簡潔的JS表達式
如果你的表達式演變的越來越復雜了
那么考慮把表達式里的一些邏輯轉義到update事件中去，如下
<my-tag><!-- the `val` is calculated below .. --><p>{ val }</p>// ..on every updatethis.on('update', function() {this.val = some / complex * expression ^ here})
</my-tag>HTML標簽中，擁有布爾值的屬性，比如checked, selected這類屬性
當表達式的值為false的時候，這些屬性是不會添加到HTML標簽中的
下面兩行代碼是等價的
<input checked={ null }><input>W3C規定，這類屬性，就算你沒給它設置值，只要他出現在HTML標簽內，那么它就等價于給這類屬性設置了true的值
再來看下面這行代碼
<p class={ foo: true, bar: 0, baz: new Date(), zorro: 'a value' }></p>這個標簽的類名經過計算后是：foo baz zorro
因為bar的值是0，0就是false，只有值是true的才會被應用到標簽上
這個特性不一定用于class，還可以用在別的地方
你還可以直接這樣寫：
<my-tag><p class={ classes }></p><script>hasAnimation() {return true}this.randomNumber = 5this.classes = {foo: true,bar: false,number: '3 > randomNumber',animated: 'hasAnimation()', //注意：這里要寫成字符串的形式baz: new Date(),zorro: 'a value'}</script>
</my-tag>經過計算后P的樣式類有foo number animated baz zorro
HTML標簽的行內樣式也可以寫成類似這樣
<my-tag><p style={ styles }></p><script>this.styles = {color: 'red',height: '10rem'}</script>
</my-tag>riotjs會自動把對象轉換成描述樣式的字符串
<p style="color: red; height: 10rem"></p>那么如何打印大括號到瀏覽器呢？可以用下面這種方式：
\\{ this is not evaluated \\} 你如果不喜歡用大括號來告訴riotjs哪行代碼是你的表達式
你可以通過配置改變這一點：
riot.settings.brackets = '${ }'
riot.settings.brackets = '\{\{ }}'注意，標注之間要用一個空格隔開
riotjs的表達式，只能輸出（渲染）純文本的字符串值；
不能輸出（渲染）HTML的字符串值
但是，你可以通過變通的方式完成這項工作，如下：
<raw><span></span>this.root.innerHTML = opts.content
</raw><my-tag><p>Here is some raw content: <raw content="{ html }"/> </p>this.html = 'Hello, <strong>world!</strong>'
</my-tag>注意，這樣做很容易受到跨站腳本攻擊，千萬不要加載不受你控制的數據；
