avalon2學習教程03數據填充

時間 2019-11-10

標籤 avalon2 avalon 學習教程數據填充简体版

原文原文鏈接

在avalon1中，存在四種數據填充的手段css

{{expr}}, {{expr|html}}, ms-text, ms-htmlhtml

其實第一種與第三種同樣，用於輸出純文本，第二種與第四種同樣，若是用戶的數據是一些HTML標籤，那麼會轉換成元素節點插入到當前位置。react

在avalon2中，只有三種數據填充的手段，原第二種使用html過濾器的方式因爲在虛擬DOM很差實現，被移除。git

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./dist/avalon.js"></script>
        <script>
            var vm1 = avalon.define({
                $id: "test",
                a: 111,
                b: 222
            })
        
        
        </script>
        <style>
            .ms-controller{
                display:none;
            }
        </style>
    </head>
    <body>
        <div ms-controller="test">
            <p><input ms-duplex="@a" />{{@a}}<strong ms-text="@a"></strong></p>
            <p><input ms-duplex="@b" /><span>{{@b}}</span><span ms-html="@b"></span></p>
        </div>
    </body>
</html>

咱們按F12，看控制檯的狀況github

可見ms-html的威力，但這是一個性能消耗比較嚴重的指令,像react，估計讓相應的指令名設計得很長，不讓人們用它：後端

var content='<strong>content</strong>';    
 
React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);

這是由於HTML中，用戶存在很大的自由，能夠隨意加onclick, src="data:text/html;base64,SGVsbG8sIFdvcmxkIQ%3D%3D"，script標籤，從而作各類破壞活動。所以avalon2也不建議人們大量使用它。網絡

若是你必定要用，那最好使用sanitize過濾器進行XSS處理性能

<p ms-html="@html | sanitize"></p>

此外值得注意的是，固然咱們將插值表達式{{}}應用於網站首屏時，有時因爲網絡慢的緣故，會出大量的亂碼現象（就是{{@b}}讓用戶看到了），這時咱們有兩個辦法。網站

第一個方法，添加ms-controller類名，將當前區域先隱藏起來，avalon掃描到這裏後會自動隱藏它們的。spa

.ms-controller{
     display:none;
 }

注意這樣式必須寫head的上方，方便它第一時間被應用。

第二個方法，使用ms-text代替{{}}，這個最省心最有效，比第一個效果好。

數據填充是傳統靜態模板的最基礎功能。所以你在混用avalon與其餘後端模板時，會出現衝突，你們都使用 {{}}作界定符。這時咱們可使用如下方式配置界定符，注意，這個腳本也在放在head前面，或保證你在掃描前運行它。

avalon.config({
   interpolate:["{%","%}"]
})

此時，咱們能夠經過avalon.config.openTag, avalon.config.closeTag獲得「{%」,"%}"。注意，界定符裏面千萬別出現<, >，由於這存在兼容性問題。這兩個界定符也不能同樣，最好它們的長度都大於1。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。