YUI3 Plugin.base не рендеринг - PullRequest
Новая
       36

YUI3 Plugin.base не рендеринг

1 голос
/ 08 июня 2011

Я пытаюсь использовать плагин yui, который извлекает файл json и заполняет div на странице.Однако все должно быть хорошо, так как плагин никогда не попадает на стадию рендеринга, остальная часть не запускается.В противном случае он успешно загружается (если я добавляю оповещение или console.log в начале события, он работает нормально).

Вот код: 

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 the 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"]});

Вот выдержка изкод с битом рендеринга: 

Y.extend(EventList, Y.Plugin.Base, {
        render: function() {
        insertEventList.call(this);
    }

По общему признанию, YUI3 смущает меня, и я предпочел бы другие библиотеки, но у меня нет выбора в этой ситуации.Вероятно, есть одна вещь, которую я только что полностью просмотрел.

Спасибо, ребята

1 Ответ

1 голос
/ 08 июня 2011

Ранее я использовал плагины YUI3, и их немного сложно понять, но я постараюсь помочь, если смогу.Как только вы создали плагин, который, насколько я могу судить, вы уже сделали так успешно, вы подключаете его к объекту где-то еще в вашем коде:

someObj.plug(Y.Plugin.EventList, cfg);

После этого вы можете получить доступ к методам плагина из пространства имен плагина объекта.В вашем случае вы бы сделали это так:

someObj.EventList.render();

Надеюсь, я правильно понимаю ваш вопрос и надеюсь, что это поможет вам кое-что прояснить.Удачи!:)

...