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




(5)

मैं 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 ...;
  }

 }
)

Answers

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

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

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

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

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


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

  • मूल्य को सीधे संदर्भित करें जैसे {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>


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

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

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

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

यह खुद को दूसरे दिन समझने की कोशिश कर रहा था और क्लिक घटनाओं को काम करने के लिए एक समाधान में आया था। संक्षिप्त उत्तर यह है कि टेम्पलेट प्रस्तुत किए जाने के बाद ईवेंट श्रोताओं को सेट करने के लिए आपको .defer फ़ंक्शन का उपयोग करने की आवश्यकता है।

मैंने पाया उदाहरण यहां दिया गया है:

var resultTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="search-item">',
            '<a id={[this.getLinkId()]} href="violation.aspx?violationid={slvha}">',
                '<img src="images/icons/home.gif" style="float:left;padding-right:2px">{number}&nbsp;{street}',
            '</a>',
            '<p>Owners:&nbsp;{owners}',
            '<br/>Flag Code:&nbsp;{flag}',
            '<br/>Number of Violations:&nbsp;[{summary}]</p>',
        '</div>',
    '</tpl>', {
    getLinkId: function(values) {
        var result = Ext.id();
        this.addListener.defer(1, this, [result]);
        return result;
    },
    addListener: function(id) {
        Ext.get(id).on('click', function(e){e.stopEvent(); alert('link ' + id + ' clicked');})
    }
});

Source


मेरे मामले के लिए मैंने कोशिश की अगर शून्य, '',! चर, लेकिन यह काम नहीं किया।

HTML फ़ील्ड से टेक्स्ट प्राप्त करने के लिए नीचे मेरा कोड देखें

var status=$(this).text(); //for example (for my case)

यदि स्थिति चर में कोई मान (कोई पाठ नहीं) था, तो मैं स्थिति 'novalue' को स्थिति चर में सेट करने का प्रयास कर रहा था।

निम्नलिखित कोड काम किया।

if(status == false)
{
   status='novalue';
} 

जब सैटस वैरिएबल के लिए कोई पाठ नहीं मिला था, तो उपर्युक्त कोड स्थिति परिवर्तक को 'novalue' असाइन किया गया था





javascript extjs