如何在 MentionsInput.js 中使用模板?

How do I use templating in MentionsInput.js?

Note: This could be a documentation for the feature of templating the list item for the plugin jQuery.mentionsInput. So I request the users, not to close this or delete this question. TIA.

我在我的项目中使用 jQuery.mentionsInput。一切正常。我正在使用这个调用插件:

$(".mention").mentionsInput({
    onDataRequest: function (mode, query, callback) {
        $.getJSON('/usersList', function(responseData) {
            responseData = _.filter(responseData, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
            callback.call(this, responseData);
        });
    }
});

/usersList 的来源如下所示:

[
    {
        "id": "Praveen",
        "name": "Praveen Kumar",
        "avatar": "/img/users/1.jpg",
        "type": "user"
    },
    {
        "id": "jeff",
        "name": "Jeff Atwood",
        "avatar": "/img/users/2.jpg",
        "type": "user"
    },
    {
        "id": "pekka",
        "name": "Pekka Gaiser",
        "avatar": "/img/users/3.jpg",
        "type": "user"
    },
    {
        "id": "billgates",
        "name": "Bill Gates III",
        "avatar": "/img/users/4.jpg",
        "type": "user"
    }
]

如果您能看到,每个用户都有一个全名 (name) 和一个用户名 (id)。我希望插件显示用户名和全名,所以我对 JSON 进行了如下修改:

"name": "Praveen Kumar (@Praveen)",

但这会在文本区域产生如下效果:

Hello Praveen Kumar (@Praveen), how are you?

而不是像这样显示:

Hello Praveen Kumar, how are you?

我希望它仅在出现建议时显示,而不是在插入文本框期间显示。我知道这可以使用 templates 进行更改,但是他们的网站上没有提供任何文档。有人可以帮忙吗?我正在使用这个:

templates: {
    wrapper: _.template('<div class="mentions-input-box"></div>'),
    autocompleteList: _.template('<div class="mentions-autocomplete-list"></div>')
}

这部分有什么注意事项吗?提前致谢。

终于找到了。我必须执行以下操作:

  1. 添加 template 项:autocompleteListItem
  2. 通过在 <%= content %> 旁边添加 (@<%= id %>) 来编辑 autocompleteListItem 以包含 ID。
  3. 要显示基于 ID 的搜索,请在 _.filter 函数的 return 中添加以下内容。

    return (
       item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
       item.id.toLowerCase().indexOf(query.toLowerCase()) > -1 // Add this ID part too!
    )
    

希望这对某人有帮助。目前,我正在使用此代码:

$(".mention").mentionsInput({
    onDataRequest: function (mode, query, callback) {
        $.getJSON('/usersList', function(responseData) {
            responseData = _.filter(responseData, function(item) { return (item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 || item.id.toLowerCase().indexOf(query.toLowerCase()) > -1) });
            callback.call(this, responseData);
        });
    },
    templates: {
        autocompleteListItem: _.template('<li data-ref-id="<%= id %>" data-ref-type="<%= type %>" data-display="<%= display %>"><%= content %> (@<%= id %>)</li>')
    }
});