PDA

View Full Version : How to create links in templates?



Dumas
18 Jul 2010, 5:51 PM
Hi!

I want to have an template with an link in it. But how can I do that with the right scoping?
I would have something like to have an template like: '{name} <a onclick="this.remove({id})">deleteMe</a>'

thx
Dumas

Condor
18 Jul 2010, 10:57 PM
I would strongly advise AGAINST using onclick to handle events.

Is this a template for a DataView or a ListView? In that case you should be using the 'click' event and check if the event target was the <a> element.

Dumas
19 Jul 2010, 4:13 AM
Ah, ok.

I have a panel where I apply the tmp to the body: myTpl.overwrite(panel.body,record.data);
But the Panel doesn't has an event link 'click' or 'bodyclick'. Do I have to listen for on the whole panel.getEl() or is there an better way?


thx
Dumas

Animal
19 Jul 2010, 4:17 AM
Listen on the Panel's body, but use the addListener's delegate option to receive events only from the elements you are interested in.

Dumas
19 Jul 2010, 5:34 AM
So is this code right:

tplMarkup = '{name} <a href="#" record_id="{id}">deleteMe</a>';
// ...
// when the body is cretae add an listener for delete clicks
panel.on('afterrender',function() {
panel.body.on('click', function(event, htmlEl, config) {
// store is defined in the outer scope above
var recordId = Number(htmlEl.getAttribute('record_id')),
record = store.getById(recordId);
store.remove(record);
// set the panels text to empty text
panel.body.dom.innerHTML = 'Please select a record from above...';
}, this, {
delegate: 'a'
});
});
thx
Roland

Condor
19 Jul 2010, 5:43 AM
Yes, although I would store the id somewhere in the Panel and not in the <a> tag (you are creating invalid XHTML).

Animal
19 Jul 2010, 5:46 AM
OK, if that is going to be the only <a> there. You don't need to add any other narrowing identifiers like class.

Not sure about the invalid DOM attribute "record_id" though.

How about using a generated ID?



tplMarkup = '{name} <a href="#" id="x-item-link-{id}">deleteMe</a>';
// ...
// when the body is cretae add an listener for delete clicks
panel.on('afterrender',function() {
panel.body.on('click', function(event, htmlEl, config) {
// store is defined in the outer scope above
var recordId = htmlEl.id.substr(12),
record = store.getById(recordId);
store.remove(record);
// set the panels text to empty text
panel.body.dom.innerHTML = 'Please select a record from above...';
}, this, {
delegate: 'a'
});
});

Where "x-item-link-" could be made more descriptive as to what it "links" to.

Animal
19 Jul 2010, 5:46 AM
Or you could put into in the # fragment of the href

Dumas
19 Jul 2010, 6:38 AM
thanks guys!

I will hold a reference to the record in the panel, seems like the cleanest way to me.

regards,
Roland