Zwei Hörer mit At.js

Question

Wer hier mit ein bisschen Erfahrung mit At.js?

Ich habe den seltsamsten Fehler gerade jetzt. Ich habe alles 100 Mal überprüft und überprüft.

Ich zuzuweisen 2 Listener zu einem Formular. 1 ruft Benutzer mit dem Symbol "@" ab, der andere ruft Ereignisse mit dem Text "event:" ab.

Die "tagUsersConfig" Optionen funktionieren gut, aber die "tagEventsConfig" verhält sich seltsam. Er ruft die ersten 5 Ereignisse ab, und sobald ich anfange, den ersten Buchstaben einzugeben, verschwindet die Liste, auch wenn ich (in der Konsole) weiß, dass ich für jedes eingegebene Zeichen die richtigen JSON-Objekte zurücksende die API (alle sind genau abhängig von dem eingegebenen Buchstaben).

Wenn ich die API-Abfrage der Benutzer in der TagEventsConfig (Ereignisse) einfügen, funktioniert das "Ereignis:" jetzt. Der seltsamste Teil ist (und Sie müssen mein Wort dafür nehmen), der Ereignis-API-Aufruf und seine Variablen sind alle vollkommen korrekt und gültig.

Theorie: Ich denke, es hat alles mit dem Matcher Callback zu tun, aber ich sehe nicht warum, da die Namen der Benutzer und Ereignisse die gleichen erwarteten Strukturen (Leerzeichen und manchmal Sonderzeichen) haben).

var userList; 
var eventList; 

var tagUsersConfig = { 
    at: "@", 
    displayTpl: "<li class='replyToAtWho-list-item clearfix'><div class='feed-replyTo-img' style='${imageId}'></div><div class='left'><div class='feed-replyTo-name'>${name}</div><div class='feed-replyTo-realName'>${realName}</div></div></li>", 
    insertTpl: '<span class="feed-reply-to-name-link" data-userNameReplyTo="${name}" data-userIdReplyTo="${userId}">${name}</span>&nbsp;', 
    callbacks: { 
    remoteFilter: function(query, render_users) { 

     $.getJSON(DOMAIN + '/Skeddy/rest/gem/v1/user?institutionid='+CAMPUS_ID+'&apitoken='+USER_TOKEN+'&limit=10&fullname=' + encodeURIComponent(query), function(data) { 

     userList = $.map(data.listT, function(value, i) { 
      var imageId = (parse_OBJ(value.i, "ImageId")) ? DOMAIN + '/Skeddy/rest/gem/v1/image/' + parse_OBJ(value.i, "ImageId") + '?sname=CampusSchema&apitoken=' + USER_TOKEN : '/' + ROOT + '/img/avatar-default.png'; 
      return { 
      'userId': value.id, 
      'realName': value.name, 
      'name': parse_OBJ(value.i, "firstName") + " " + parse_OBJ(value.i, "lastName"), 
      'imageId' : 'background-image : url("' + imageId + '")' 
      }; 
     }); 

     render_users(userList); 

     }); 
    }, 
    matcher: function(flag, subtext, should_start_with_space) { 
     var match, regexp; 
     flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
     if (should_start_with_space) { 
     flag = '(?:^|\\s)' + flag; 
     } 
     regexp = new RegExp(flag + '([A-Za-z0-9_\\s\+\-\]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi'); 
     match = regexp.exec(subtext.replace(/\s/g, " ")); 
     if (match) { 
     return match[2] || match[1]; 
     } else { 
     return null; 
     } 
    } 
    }, 
    delay: 20 
}; 

var tagEventsConfig = { 
    at: "event:", 
    displayTpl: "<li class='itemAtWho-list-item clearfix'><div class='feed-item-img' style='${imageId}'></div><div class='left'><div class='feed-item-name'>${eventName}</div><div class='feed-replyTo-realName'>10-10</div></div></li>", 
    insertTpl: '<a href="' + DOMAIN + '/website/event-details/' + CAMPUS_ID + '/${eventId}" class="fp-ext-link" target="_blank">${eventName}</span>&nbsp;', 
    callbacks: { 
    remoteFilter: function(query, render_events) { 

     $.getJSON(DOMAIN + '/Skeddy/rest/gem/v1/event?institutionid='+CAMPUS_ID+'&apitoken='+USER_TOKEN+'&limit=10&state=published_expired&name=' + encodeURIComponent(query), function(data) { 

     eventList = $.map(data.listT, function(value, i) { 
      var imageId = (value.imageId) ? DOMAIN + '/Skeddy/rest/gem/v1/image/' + value.imageId + '?sname=CampusSchema&apitoken=' + USER_TOKEN : '/' + ROOT + '/img/avatar-default.png'; 
      return { 
      'eventId': value.eventId, 
      'eventName': value.name, 
      'imageId' : 'background-image : url("' + imageId + '")' 
      }; 
     }); 

     render_events(eventList); 

     }); 
    }, 
    matcher: function(flag, subtext, should_start_with_space) { 
     var match, regexp; 
     flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
     if (should_start_with_space) { 
     flag = '(?:^|\\s)' + flag; 
     } 
     regexp = new RegExp(flag + '([A-Za-z0-9_\\s\+\-\]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi'); 
     match = regexp.exec(subtext.replace(/\s/g, " ")); 
     if (match) { 
     return match[2] || match[1]; 
     } else { 
     return null; 
     } 
    } 
    }, 
    delay: 20 
}; 

$POST_FORM_MASTER.find(".feed-form.mention").atwho(tagEventsConfig).atwho(tagUsersConfig); 

Vielen Dank für Ihre Zeit.

Answer 1

Oh. Beeindruckend. Ich habe es herausgefunden.

Vorher:

eventList = $.map(data.listT, function(value, i) { 
     var imageId = ... 
     return { 
     'eventId': value.eventId, 
     'eventName': value.name, // ********** Here was my mistake ********** 
     'imageId' : 'background-image : url("' + imageId + '")' 
     }; 
    }); 

Nach:

eventList = $.map(data.listT, function(value, i) { 
     var imageId = ... 
     return { 
     'eventId': value.eventId, 
     'name': value.name, // ********** Here is the fix ********** 
     'imageId' : 'background-image : url("' + imageId + '")' 
     }; 
    }); 

ich nicht erkennen, dass die Variablen (zB: '$ {Name}') im 'displayTpl'/'insertTpl' hatte um die Schlüssel der tatsächlichen Objekte zu sein, und nicht die Schlüsselnamen, die ich ihnen in meinem eventList-Array ('eventName') gab.

Aber das macht nicht 100% Sinn, da ich meine eigenen Schlüssel in den Optionen von tagUsersConfig benenne/etikettiere und diese in 'displayTpl'/'insertTpl' einfüge und alles läuft gut ... So verwirrend.