HTML 标记在 CanJS 中使用胡须模板进行转义

HTML tags are escaped with mustache templates in CanJS

本文关键字：胡须模 转义 CanJS HTML      更新时间：2023-09-26

我的要求是我需要向用户显示一组选项。我使用胡须模板使用 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);

任何帮助都会很棒。

谢谢。

我会不惜一切代价避免尝试将任何类型的 DOM 元素添加到您的选项元素中，因为这永远无法保证有效。

如果您查看选项标签的规范，您会发现唯一接受的内容模型要么是空，要么是文本，这意味着什么都没有或只是文本。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}}
相关文章：