At.js 提及回调和重复
At.js Mentions Callbacks and Duplicates
谁有 At.js 方面的经验可以帮忙?我正在尝试:
- 获取数组中插入的提及项,以便随后可以用 PHP
处理它们
- 防止重复条目(不知道从哪里开始)
对 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 的关注者列表中。
谁有 At.js 方面的经验可以帮忙?我正在尝试:
- 获取数组中插入的提及项,以便随后可以用 PHP 处理它们
- 防止重复条目(不知道从哪里开始)
对 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 的关注者列表中。