Ext のテンプレートで第 2 層の json data_json を解析できるようにするメソッド-jsチュートリアル-php.cn

Ext のテンプレートで第 2 層の json data_json を解析できるようにするメソッド

WBOY

リリース： 2016-05-16 19:07:03

オリジナル

1334 人が閲覧しました

Ext のテンプレートは、json データを渡すことでテンプレートの置換をサポートします。
API にはそのような例があります:

コードをコピーコードは次のとおりです:

var t = new Ext.Template( 
 '', 
 '{name :trim} {値 :ellipsis(10)}', 
 '
' 
); 
t.append('some-element', {id: ' myid'、cls: 'myclass'、名前: 'foo'、値: 'bar'}); 

テスト用に少し変更します:

コードをコピーしますコードは次のとおりです:

var t = new Ext.Template(
'

',
'{name} {value}',
'< /div>'
) ; var dt=t.apply({id: 'myid', cls: 'myclass', 名前: 'foo', 値: 'bar'}); (dt);

上記のコードを実行すると、

foo bar<が表示されます。 ;/div> 置換が成功したことを示します。

ただし、次のような別のテンプレートデータがある場合:

コードをコピーコードは次のとおりです:

{id: 'myid'、cls:{o:'myclass'}、名前: 'foo'、値: 'bar'}

us テンプレート内の元の cls 部分を cls.o の値 (myclass) に置き換えたいのですが、どうすればよいですか? {cls.o} を直接使用しますか? 試しても問題ありません。代替手段はありません。テンプレートの照合と置換は、{} 内のコロンの前の文字列と JSON 変数を直接照合するためです。もちろん、文字列 cls.o は見つからないため、一致することはありません。
幸いなことに、テンプレートはデータの解析と処理をサポートしています。
分析関数を自分で定義するだけです。実際は非常に簡単です:

コードをコピーコードは次のとおりです:

var t = new Ext.Template(

 '', 
 '{name } {値} ', 
 '
' 
); 
t.parseJSON=function(data){return data.o}; t.apply( {id: 'myid', cls: {o:'myclass'}, name: 'foo', value: 'bar'}); >

parseJSON と呼ばれる解析メソッドを定義しました。これは、テンプレート内のトップレベルの cls にアクセスし、cls (オブジェクト) の値を処理します (その o 属性に直接アクセスします)。