javascript एक ExtJS XTemplate में फ़ंक्शन को कॉल करें




(3)

आप या तो यह कर सकते हैं:

  • मूल्य को सीधे संदर्भित करें जैसे {myValue}
  • इसे किसी फ़ंक्शन में पास करें जैसे {[this.myFunction(values.myValue)]}

नीचे एक उदाहरण है जो ExtJS के सभी संस्करणों के साथ काम करता है।

var data = [{
    id: 1,
    subdata: { x: 10, y: 20 }
}, {
    id: 2,
    subdata: { x: 20, y: 30 }
}];

var tpl = new Ext.XTemplate([
    '<ul>',
    '<tpl for=".">',
        '<li>ID: <span class="raw">{id}</span> or ',
            '<span class="fmt">{["#" + this.pad(values.id, 3, "0")]}</span></li>',
        '<ul>',
        '<tpl for="subdata">',
            '<li>x: <span class="raw">{x}</span> or ',
                '<span class="fmt">{[this.frmtUnits(values.x)]}</span></li>',
            '<li>y: <span class="raw">{y}</span> or ',
                '<span class="fmt">{[this.frmtUnits(values.y)]}</span></li>',
        '</tpl>',
        '</ul>',
    '</tpl>',
    '</ul>',
    {
    	pad : function(s, n, c) {
            if (typeof s !== 'string') s = '' + s;
            return Math.abs(n) <= s.length ? s : this.pad(n > 0 ? c + s : s + c, n, c);
        },
        frmtUnits : function(v) {
            return v + 'px';
        }
    }
]);

Ext.onReady(function () {
    new Ext.Panel({
        autoHeight: true,
        html: tpl.apply(data),
        layout: 'fit',
        style: { padding: '2px', margin: '2px' },
        renderTo: Ext.getBody()
    });
});
ul li {
    line-height: 1.67em;
}
li span {
    font-weight: bold;
}
li span.raw {
    color: #D44;
}
li span.fmt {
    color: #44D;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>

https://code.i-harness.com

मैं xtemplate का उपयोग करके एक विशिष्ट स्थिति निर्धारित करने के लिए फ़ंक्शन का उपयोग करने से परिचित हूं लेकिन यह सुनिश्चित नहीं करता कि कथन के बिना सशर्त के बिना फ़ंक्शन को सीधे कॉल कैसे करें।

मेरा कोड, उदाहरण के लिए, कुछ अक्षरों को एक स्ट्रिंग में जोड़ना चाहता है जिसे मैं अपने xtemplate में उपयोग कर रहा हूं। मुझे लगता है कि ऐसा करने का सबसे अच्छा तरीका अक्षर को जोड़ना है जब xtemplate प्रस्तुत किया जाता है।

var myTpl = new Ext.XTemplate(
  '<tpl for=".">',

    '<tpl if="this.isThumbnailed(thumbnailed) == true">',

      '<img src=this.getThumbUrl(rawThumbUrl)/>', //this call to function does not work, also tried variations of this.

    '</tpl>',

  '</tpl>',

 {
  isThumbnailed : function(thumbnailed) {
    return ...;
  },
  getThumbUrl : function(rawThumbUrl) {
    //... //this function does not get called.
    return ...;
  }

 }
)

दायरे में परिभाषित कार्यों को कॉल करने के लिए, आपको वाक्यविन्यास का उपयोग करने की आवश्यकता है:

{[this.functionName(values.valueName)]}

आपके मामले में, आप कॉल कर सकते हैं:

'<img src="{[this.getThumbUrl(values.rawThumbUrl)]}"/>',

यदि आप टेम्पलेट संदर्भ के बाहर परिभाषित फ़ंक्शन का उपयोग करना चाहते हैं, तो इसे हटा दें this. फ़ंक्शन कॉल से।


XTemplate कन्स्ट्रक्टर एपीआई दस्तावेज़ों पर एक नज़र डालें। वहां बहुत सारे अच्छे उदाहरण हैं। का हवाला देते हुए:

{[...]} के बीच कुछ भी टेम्पलेट के दायरे में निष्पादित कोड माना जाता है।

तो आपको कुछ ऐसा करने में सक्षम होना चाहिए:

'<img src={[this.getThumbUrl(rawThumbUrl)]} />',







extjs