HTML-теги экранируются с помощью шаблонов усов в CanJS

Question

Мое требование заключается в том, что мне нужно отобразить набор параметров для пользователя. Я использовал шаблон усов для рендеринга опций с использованием фреймворка CanJS javascript.

Проблема здесь в том, когда я пытаюсь сделать такие варианты, как: Potato Rs. 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 любого типа к вашим опционным элементам, потому что это никогда не гарантированно работает.

Если вы посмотрите на спецификацию для тегов параметров, то обнаружите, что единственная принятая модель содержимого - это "Пусто" или "Текст", то есть ничего или просто текст. 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}}