HTML標籤在CanJS中用鬍子模板轉義

Question

我的要求是我需要向用戶顯示一組選項。我用鬍子模板來渲染使用CanJS javascript框架的選項。

這裏的問題是，當我試圖呈現如下選項： 土豆盧比。 12

小鬍子模板正在逃離我的HTML，它正在顯示帶有HTML標籤的值。

我在我的模板中也使用了{{{}}}，但它沒有幫助。

請檢查相同的小提琴。

http://jsfiddle.net/arvi87/22CU8/1/

我的鬍鬚模板：

{{#options}} 
      <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{display}}}</option> 
{{/options}} 

我的採樣控制我在哪裏數據綁定到我的模板：

var frag = can.view('{{' +this.options.view+ '}}',{ 
     /* 
      I am passing observe here which is escaping the HTML tags like: 
       Cabbage <span>Price: Rs.12</span> 
     */ 
     options: arrayObserver 

     /* 
      This is rendering properly. Not sure about what is the difference ? 
       Cabbage Price: Rs.12 
     */ 
     //options: array 
    }); 

我選擇陣列：

var array = [{ 
     selected: true, 
     display: "None" 
    },{ 
     selected: false, 
     display: "Tomato" 
    },{ 
     selected: false, 
     display: "Potato <span>Rs.10</span>" 
    },{ 
     selected: false, 
     display: 'Cabbage <span>Price: Rs.12</span>' 
    }]; 
    arrayObserver = new can.Observe.List(array); 

任何幫助都會很棒。

謝謝。

Answer 1

我會不惜一切代價避免試圖添加任何類型的DOM元素到您的選項元素，因爲這永遠不能保證工作。

If you take a look at the spec for option tags，您會發現接受的唯一內容模型是Empty或Text，不含任何內容或文本。 CanJS堅持接近規範，這就是爲什麼它將它呈現爲直接文本，因爲選項只允許文本。

如果您在某些數據中遇到了跨度和其他HTML，並且您無法通過任何其他方式擺脫它們，我會建議您編寫一個輔助函數，將HTML標籤從文本中除去，像...

can.Mustache.registerHelper('displayHelper', function(display) { 
    var stripped = display().replace(/<[^>]*>/g, ""); 
    return stripped; 
}); 

並修改模板的樣子......

{{#options}} 
    <option value="{{value}}" {{#selected}}selected{{/selected}}> 
    {{{displayHelper display}}} 
    </option> 
{{/options}}