使用 At.JS @Mentions 和 Devise [Ruby on Rails 4]答案

【问题标题】：Using At.JS @Mentions with Devise [Ruby on Rails 4]使用 At.JS @Mentions 和 Devise [Ruby on Rails 4]
【发布时间】：2016-02-02 20:39:27
【问题描述】：

根据我在调查此问题并在没有设计的情况下从头开始创建用户时所学到的知识。是不是 Devise 不接受 [GET] 请求，因此我无法使用 JSON 访问用户模型。有没有人实现了包含At.js 和Devise 的解决方案？如何将用户模型连接到@Mentions symbol 的JS component？

更新了在@Seichleon 的帮助下所做的更改。

atwho-post.coffee

jQuery ->
  $('[data-mentionable]').atwho({
    at: "@",
    data: '<%= mentionables_path %>',
    insertTpl: '${username}',
    displayTpl: '<li data-id="${id}"><span>${username}</span></li>',
    limit: 10,
  });

post _form.html.erb（等待数据属性）

<%= f.text_area :body, maxlength: @maximum_length, id: 'body', data: {behavior: 'autocomplete'} %>

【问题讨论】：

Devise 不会为您提供所需的控制器操作，但它确实接受 GET/JSON 请求。您只需构建自己的用户控制器来支持您想要的请求。
好的，我将在自定义设计 Users_Controller.rb 中创建一个 json 方法来获取 json 形式的用户。
不需要它是一个定制的设计控制器。最初，没有用户控制器，因此请将该控制器设为您自己的。

标签： javascript ruby-on-rails ruby ruby-on-rails-4 devise

【解决方案1】：

这有几件事。首先让我们创建一个操作来处理获取我们的用户。

添加路线：

get 'share/users', as: :mentionables

将实际操作添加到控制器：（在我的情况下，控制器将是共享控制器）

class ShareController < ApplicationController
    def users
        render json: User.all, root: false
    end
end

现在，无论您何时访问share/users，您都应该得到类似的回报：

[  
    {  
       "id":2,
       "email":"test@2build.it",
       "name": "sergio",
       ...
    },
    ...
]

有了这个，你可以像这样设置 at.js：

$('[data-mentionable]').atwho({
    at: '@',
    data: '<%= mentionables_path %>',
    insertTpl: '${name}',
    displayTpl: '<li data-id="${id}"><span>${name}</span></li>',
});

然后，它应该根据用户的姓名列出用户。

【讨论】：

非常好。我会尝试这种方法。
下拉列表不会出现在 _form 视图中。我按照您的所有步骤重新启动服务器以确保资产管道已刷新。您在视图中为 :body 属性使用了什么数据元素？您可以将这一行添加到您的答案等
对于 share_controller.rb 中的某些属性，我收到 NameError 未定义的局部变量或方法。这是我的嵌套属性链接到用户模型的结果。
我让 JSON 数据流正常工作。但是，我仍然需要视图的数据属性。
@DanielW 什么数据属性？在我的示例中，只要表单元素具有可数据提及的属性即可。你试过了吗？

【解决方案2】：

发布 _form.html.erb 视图

<%= f.text_area :body, maxlength: @maximum_length, id: 'body', data: {behavior: 'autocomplete'} %>

atwho-post.coffee

jQuery ->
  $('[data-behavior="autocomplete"]').atwho({
    at: "@",
    data: "/share/users.json",
    insertTpl: '${username}',
    displayTpl: '<li data-id="${id}"><span>${username}</span></li>',
    limit: 15,
  });

【讨论】：

我如何在视图中突出显示这个作为提到用户的链接？