0

我的要求是我需要向用户显示一组选项。我使用了 mustache 模板来使用 CanJS javascript 框架呈现选项。

这里的问题是当我试图呈现如下选项时：Potato Rs。12

mustache 模板正在转义我的 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);

任何帮助都会很棒。

谢谢。

4

1 回答 1

2

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

如果您查看 option tags 的规范，您会发现唯一接受的内容模型是 Empty 或 Text，意味着什么都没有或只是文本。CanJS 紧贴规范，这就是为什么它将其呈现为纯文本的原因，因为选项只允许文本。

如果您在某些数据中遇到了 span 和其他 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}}
于 2013-10-30T20:44:28.057 回答