web-dev-qa-db-ja.com

XTemplate（itemTpl）内で関数を呼び出す方法

ビューに出力されるテキストに対してExtの String メソッドを使用したいと思います。

例えば：

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>' + Ext.String.Ellipsis( + '{post_text_teaser}' + \, 4) + '</p>',
    ...
].join(''),

しかしもちろん、10行目の連結は違法です。

それが可能かどうか、またはこれを正しく行う方法を知っていますか？

javascriptextjsextjs4sencha-touchsencha-touch-2
14
pepe

これで問題が解決するはずです。

    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[Ext.String.Ellipsis(values.post_text_teaser,4,false)]}</p>',
    '</tpl>'

xTemplateの詳細については、 Sencha Docs を参照してください。

テンプレートメンバー関数の特徴は、私が知る限り、通常の方法でitemTplで直接定義することはできませんが、新しいXTemplateを明示的に定義してから、それをitemTplで使用する必要があるということです。例を参照してください。

var tpl = new XTemplate(
    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[this.shorten(values.post_text_teaser)]}</p>',
    '</tpl>',
    {        
        shorten: function(name){
           return Ext.String.Ellipsis(name,4,false);
        }
    }
);

...

itemTpl: tpl,

...

Senchafiddleの例

これは、以下のコードと同様に正常に機能するはずです（上記のXTemplateからコードを挿入するだけです）。

itemTpl: new XTemplate(...),

Senchafiddleの例

これがそれを整理することを願っています！

editは、終了タグを見逃していることに気づきました。終了タグがなくても機能する場合もありますが、興味深いエラーが発生する可能性があるため、常に使用することをお勧めします（この場合、生成されたコードにブラケットがありません）。

18
zelexir

注：以下の例は期待どおりに機能しません！ zelexir答えを見てください！

メンバー関数を使用できます

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.doAction(post_text_teaser)]}</p>',
    ...,
    {
        // XTemplate configuration:
        disableFormats: true,
        // member functions:
        doAction: function(name){
           return Ext.String.Ellipsis(name + "\", 4);
        }
    }
]
1
sra

テンプレート内で関数を使用できます

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.concatenate(values.post_text_teaser)]}</p>',
    ...,
    {
        concatenate: function(teaser) {
               return Ext.String.Ellipsis( + teaser + \, 4);
        }
    }
]
0
Johan Haest