0

私の要件は、一連のオプションをユーザーに表示する必要があるということです。私は口ひげテンプレートを使用して、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);

どんな助けでも素晴らしいでしょう。

ありがとう。

4

1 に答える 1

2

オプション要素に任意のタイプの 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}}
于 2013-10-30T20:44:28.057 に答える