I'm trying to use a yui plugin that pulls from a json file and populates a div on the page. Everything should be a go, however, since the plugin never gets to the render stage, the rest of it does not run. It is successfully loaded otherwise (if I stick an alert or console.log at the beginning of the event, it works fine).
Here's the code:
YUI.add('events', function(Y) {
var urlEvents = //"/cgi-bin/eventview-json/?cal=admissions/events&days=10";
"/admissions/events/events.json";
//var eventContainer = $("#insert-events");
/* EventList class constructor */
var EventList = function(config) {
EventList.superclass.constructor.apply(this, arguments);
};
/*
* Required NAME static field, to identify the class and
* used as an event prefix, to generate class names etc. (set to the
* class name in camel case).
*/
EventList.NAME = "EventList";
/*
* Required NS static field, to identify the property on the host which will,
* be used to refer to the plugin instance ( e.g. host.feature.doSomething() )
*/
EventList.NS = "EventList";
/*
* The attribute configuration for the plugin. This defines the core user facing state of the plugin
*/
EventList.ATTRS = {};
var convertYYYYMMDDtoJS = function(s) {
var a, jsdate = null;
try {
a = /^(\d\d\d\d)(\d\d)(\d\d)$/.exec(s);
if (a) {
jsdate = new Date(a[1], a[2]-1, a[3]);
}
} catch (ex) {
/* Nothing */
}
return jsdate;
};
var insertEvents = function(id, response, e) {
alert('hello');
var i, resp, events, event, html, jsdate, label, seenevent, yyyymmdd;
var maxevents = 5, eventcount;
try {
resp = Y.JSON.parse(response.responseText);
events = resp.results;
html = "";
seenevent = {};
eventcount = 0;
yyyymmdd = "";
for (i = 0; i < events.length; i++) {
event = events[i];
if (seenevent[event.title]) {
continue;
}
seenevent[event.title] = true;
if (event.date !== yyyymmdd) {
// This is the first event on this date.
// If we've seen maxevents events, then bail before starting a new day.
if (eventcount >= maxevents) {
break;
}
// Put out a new label for this day.
jsdate = convertYYYYMMDDtoJS(event.date);
label = Y.DataType.Date.format(jsdate, {format: "%b %e %a"});
/*
* The first empty div below, "<div class='clear'></div>" is only needed for IE 7.
* IE 7 does not properly clear both left and right floats when "clear: both" is specified
* if th开发者_如何学JAVAe element itself is floated. The extra div clears the floats, but isn't floated
* itself. The extra div doesn't cause any grief in newer browsers, so I add it always.
*/
html += "<div class='clear'></div><div class='event-datelabel'>" + label + "</div>\n";
yyyymmdd = event.date;
}
html += "<div class='event-text'>" + event.html + "</div>\n";
eventcount++;
}
this.get('host').setContent(html + "<div id='events-footer'><a href='/calendar/'>all events</a></div>");
} catch(ex) {
console.log("Error", ex);
this.get('host').setContent("Event list not available");
return;
}
};
var insertEventList = function(yyyy, mm, dd) {
var url = urlEvents;
if (yyyy) {
url += '&yyyy=' + yyyy;
}
if (mm) {
url += '&mm=' + mm;
}
if (dd) {
url += '&dd=' + dd;
}
Y.io(url, {on: {success: insertEvents}, context: this});
};
/* EventList extends the base Plugin.Base class */
Y.extend(EventList, Y.Plugin.Base, {
render: function() {
insertEventList.call(this);
}
});
//console.log("assigning", EventList);
Y.namespace("Plugin").EventList = EventList;
}, '1.0.0' ,{requires:['node', 'base', 'plugin', "json-parse", "datatype-date"]});
Here's the excerpt from the code with the render bit:
Y.extend(EventList, Y.Plugin.Base, {
render: function() {
insertEventList.call(this);
}
Admittedly, YUI3 confuses me, and I would prefer other libraries, but I don't have a choice in this situation. There's likely one thing that I've just completely looked over.
Thanks guys
I've used YUI3 plugins before and they are a bit difficult to grasp, but I'll try to help if I can. Once you've created the plugin, which, from what I can tell, you've already done so successfully, you plug it into an object somewhere else in your code:
someObj.plug(Y.Plugin.EventList, cfg);
After that, you can access the plugin's methods from within the object's plugin namespace. In your case you'd do this like so:
someObj.EventList.render();
Hopefully I'm understanding your question correctly and I hope that helps clear some stuff up for you. Good luck! :)
精彩评论