在 Phoenix 模板中使用 javascript

Question

我想知道如何在我的 Phoenix 模板中使用 javascript 函数动态更新 phoenix 变量。

目前我有一个从我的控制器发送的列表，我正在使用一个 elixir for 循环来根据其中的内容呈现 html。我希望能够在输入框中输入内容并根据输入框中的内容过滤列表。

代码示例

<%= for word <- @words do %>
  <p><%= word %></p>
<% end %>

我希望能够基于js 函数动态过滤@words。

有人知道如何实现吗？

提前致谢

Answer 1

您可以采用几种不同的方法，主要取决于最初调用 JS 函数（在页面加载时）还是仅在以后根据用户操作调用。

方法一、在Phoenix模板中生成JS，让JS渲染列表。

<script>
  var wordList = [
    <%= for word <- @words do %>
      '<%= word %>',
    <% end %>
  ];
</script>

方法 2。正如@hisa_py 所说，用一个属性标记每个项目，以后可以选择和隐藏。

<%= for word <- @words do %>
  <p class='word-list' data-word='<%= word %>'><%= word %></p>
<% end %>

然后在 JS 中

function show(list) do
  var words = $('.word-list');
  for (var i = 0; i < words.length; i++) {
    if (list.indexOf($(words[i]).addr('data-word')) === -1) {
      $(words[i]).hide();
    } else {
      $(words[i]).show();
    }
  }
}