Question

此处有At.js经验的人？

我现在有一个最奇怪的错误。我已经检查并重新检查了100次。

我为表单分配了2个监听器。 1使用“ @ ”符号提取用户，另一个使用“事件：”文本提取事件。

“tagUsersConfig”选项工作得很好，但“tagEventsConfig”表现得很奇怪。它获取前5个事件，然后一旦我开始键入第一个字母，列表就会消失，即使我知道（在控制台中）对于我输入的每个字符的事实，它也会从我发回正确的JSON对象API（所有这些都是准确的，具体取决于输入的字母）。

如果我将用户的API查询粘贴到tagEventsConfig（events）中，则“event：”现在可以正常工作。最奇怪的部分是（并且你将不得不接受我的话），事件API调用及其变量都是完全正确和有效的。

理论：我认为这一切都与matcher回调有关，但我不明白为什么，因为用户的名字和事件名称具有相同的预期结构（空格，有时是特殊字符。）

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);

非常感谢你的时间。

Answer 1

喔。哇。我想通了。

之前：

    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 + '")'
      };
    });

之后：

    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 + '")'
      };
    });

我没有意识到＆＃39; displayTpl＆＃39; /＆＃39; insertTpl＆＃39;中的变量（例如：＆＃39; $ {name}＆＃39;）必须是实际的对象＆＃39;键，而不是我在eventList数组中提供的键名（＆＃39; eventName＆＃39;）。

但同样，这并没有100％的意义，因为我在tagUsersConfig选项中命名/标记了我自己的键，并将它们插入到＆lt; displayTpl＆＃39; /＆＃39中; insertTpl＆＃39;它一切正常......太混乱了。

At.js的两个听众

1 个答案: