Rails 4 - 从 ajax 更新表单中的值或数据属性，并在 if 语句中使用此更新后的值

Question

我有一个 Rails 应用程序，其中 Users 可以属于一个或多个 Teams。用户可以为每个团队创建想法。我希望 Ideas 的表单在外观和行为上略有不同，具体取决于用户所属的团队数量。如果用户不是任何团队的成员，将显示此消息：You need to create a team first，然后用户才能创建任何想法。

我遇到的问题是我用 Ajax 创建了 Teams。在想法表格中，我目前有这样的条件：

- if current_user.teams.count == 0
  You need to create a team first
- else
  [..]

自从我使用 Ajax 创建团队后，即使用户创建了他/她的第一个团队，也会显示此消息。当然，除非他/她重新加载页面，否则它会起作用。但是我想要一个无缝的体验。

所以这个条件：

- if current_user.teams.count == 0

需要更改为我可以从 js.erb 文件访问和更新的内容，我不太确定如何实现。

我正在考虑可能使用 hidden_field_tag，我可以在 Ajax 中更新它。但是我不确定我在视图中的 if 语句会是什么样子。我尝试了以下但没有成功（我使用 HAML）：

= hidden_field_tag "team_count", current_user.teams.count, id: :team_count

:javascript
  if ($("#team_count").val > 1) {
    [...]
  } else {
    [...]
  }

关于我应该做什么的任何想法？

Answer 1

将数据从 Rails 传递到前端的最简单方法是通过路由（使用 ajax 访问）。

如果您还通过 ajax 调用创建团队，我会创建一个函数来检查当前团队并相应地更新您的视图，作为团队创建回调的一部分。

类似于：

function updateDom(){
    $('#myForm').text('On a team');
};

function checkTeam(){
    $.get('/numTeams', function(data){
        if (data.teams > 1){
            updateDom();
        }
    })
};

function createTeam(args){
    $.post('/createTeam', data, function(res){
        checkTeam();   
    })
};

因此，当创建团队时，它将检查团队并相应地更新 DOM。

你也可以让 js 不断检查团队是否不同并相应地更新

var formText = window.setInterval(checkTeam, 1000);

最重要的是，任何动态都将由 js 处理，而不是由 rails 处理（除了完全刷新页面以获取加载时填充的新信息）。

Answer 2

想到我的本地存储想法...

如果您只关心 current_user，那么您可以这样做...

编辑：计算团队而不是仅仅检查任何

编辑 2：为什么还要使用 localStorage？只需 javascript 个变量即可。

编辑 3：实际上，local storage will preserve consistency across tabs !

在你的view.html.erb

...
<%= if current_user.has_teams %>
<script>
/* Using local storage : */
localStorage.setItem('nb_teams', <%= current_user.teams.count %>);

/* ...Hey ! We can just add a javascript variable */
var num_teams = <%= current_user.teams.count %>
</script>
<% end %>
....

在你的表格javascript中

/* Local storage only : */
num_teams = parseInt(localStorage.getItem('nb_teams'))

if( num_teams === 0){
  alert("You don't have any team !");
} else if (num_teams ===1) {
  // Normal case
} else if (num_teams >= 2){
  alert("Please select a team")
}

在您的AJAX团队创建javascript中

function createTeam(){
  ....
  $.post(....)
  .success( function(){
    /* Local storage */
    num_teams = parseInt(localStorage.getItem('nb_teams'))
    localStorage.setItem('nb_teams', num_teams+1);

    /* Plain old javascript */
    num_teams ++;
  })
}

Rails 4 - 从 ajax 更新表单中的值或数据属性，并在 if 语句中使用此更新后的值

Rails 4 - update value or data attribute in form from ajax and use this updated value in an if statement

javascript

ajax

jquery

ruby-on-rails

form-for