Question

我的要求是我需要向用户显示一组选项。我使用了胡子模板来使用CanJS javascript框架渲染选项。

这里的问题是当我尝试呈现如下选项时：马铃薯Rs。 12

小胡子模板正在转义我的HTML，它正在显示带有HTML标记的值。

我在模板中也使用了{{{}}}，但它没有帮助。

请检查小提琴。

我的小胡子模板：

{{#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，您会发现接受的唯一内容模型是“空”或“文字”，不含任何内容或仅包含文字。 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}}

使用CanJS中的小胡子模板转义HTML标记

1 个答案: