YUI3 Plugin.base 不渲染

Question

我正在尝试使用 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 让我感到困惑，我更喜欢其他库，但在这种情况下我别无选择。我可能刚刚彻底检查了一件事。

谢谢大家

Answer 1

我以前使用过 YUI3 插件，它们有点难以掌握，但如果可以的话我会尽力提供帮助。创建插件后（据我所知，您已经成功完成了），将其插入代码中其他位置的对象中：

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

之后，您可以从对象的插件命名空间内访问插件的方法。在你的情况下，你会这样做：

someObj.EventList.render();

希望我正确理解你的问题，我希望这有助于为你清除一些东西。祝你好运！ :)