At.js 提及回调和重复

At.js Mentions Callbacks and Duplicates

谁有 At.js 方面的经验可以帮忙?我正在尝试:

  1. 获取数组中插入的提及项,以便随后可以用 PHP
  2. 处理它们
  3. 防止重复条目(不知道从哪里开始)

对 Javascript 和 jQuery 的经验不足,因此非常感谢您的帮助。仅供参考,我正在使用 At.js 和惊人的 Froala WYSIWYG Editor

这是我必须获取标签的内容,但我不确定如何将其放入数组中。

$(function(data){   
   $('#postTagsInput').atwho({
       at: '@', 
       data: 'URL'
});

$('#postTagsInput').on("inserted.atwho", function($li, query) {
   console.log(query);

   var postTags = query;
   $('#myResults').html(postTags);      
  });      
});

您可以在选择它们时将它们推入数组,方法是使用 At.js 默认回调或 JQuery 在提交表单后解析值。

这是选项 #1 的伪代码。人是你提到的人的数组。您需要将调试器放入 before insert 中以查找嵌套值的位置。 (这取决于您的 json 响应的结构。)

$(function(data){   
   $('#postTagsInput').atwho({
       at: '@', 
       data: 'URL',
       callbacks:
         beforeInsert: function(value, $li) {
         //debugger here to figure out where your data value is
         people.push(value.thing_to_insert);
       }
});

这有效,但前提是您不在乎有人稍后会改变主意,因为它会在您选择时插入您的提及。如果你想让它更灵活,然后使用 JQuery 将名称解析出文本区域,有点像这样:

mentionsString = $("#textarea_id").val();
mentions = mentionsString.split(' ');

然后您可以使用 TwitterText 从该数组中解析出 @mentions。 https://github.com/twitter/twitter-text

如果您希望它们是唯一的并且您没有使用框架,则必须遍历您的数组并解析出重复项。更好的是,使用 Ember 并且它在 Array 方法中内置了 uniq :)

我通过为插入的提及名称使用自定义“insertTpl”解决了这个问题:

var at_config = {
    at: '@',
    data: mentionablesList,
    displayTpl: '<li><span>${name}</span></li>',
    insertTpl: '<a href="${url}" data-type="mentionable" data-id="${id}" data-name="${name}">${name}</a>'
};

$(that.document.getBody().$)
    .atwho('setIframe', that.window.getFrame().$)
    .atwho(at_config);

然后使用jQuery解析输入值并提取所有提及的名称:

var commentHtml = CKEDITOR.instances['new-comment'].getData();
var comment = $('<div/>').html(commentHtml).contents();

comment.find('a[data-type="Employee"]').each(function(index, element) {

    // do whatever you need with $(element) object

});

注意:我在我的案例中使用了 CKEditor -- 一个评论框,允许用户在撰写评论时提及其他用户的名字。一旦评论被 post 编辑,所有提到的名字都将被添加到评论所属的 post 的关注者列表中。