avalon2學習教程 03數據填充

數據填充是一個模版最基礎的功能，直接從JSON（vm）取出數據，放到適當的位置上。在靜態模板中，不區分文本與HTML，只看你的字符串是否有< >來決定生成文本節點與元素節點。但MVVM中，這兩種是嚴格區分的。一般來說，我們只要求填文本，不要填HTML。填HTML有點危險！

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

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

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

在avalon2中，只有三種數據填充的手段，原第二種使用html過濾器的方式由於在虛擬DOM不好實現，被移除。

    
        
        
 
 
 
         
        
 
 
 
         
        
        
        
    
    
        
 
 
 
         

            
  
  
  
          
{{@a}}
            
  
  
  
          
{{@b}}
        
 
 
 
         
    

我們按F12，看控制台的情況

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

var content='content';    
 
React.render(
    
 
 
 
         
,
    document.body
);

這是因為HTML中，用戶存在很大的自由，可以隨意加onclick, src="data:text/html;base64,SGVsbG8sIFdvcmxkIQ%3D%3D"，script標簽，從而做各種破壞活動。因此avalon2也不建議人們大量使用它。

如果你一定要用，那最好使用sanitize過濾器進行XSS處理

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

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

 .ms-controller{
     display:none;
 }

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

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

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

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

此時，我們可以通過avalon.config.openTag, avalon.config.closeTag得到“{%”,"%}"。注意，界定符里面千萬別出現<, >，因為這存在兼容性問題。這兩個界定符也不能一樣，最好它們的長度都大於1。