在Phoenix Framework应用程序中的某些页面上包含Javascript

Question

我有一些Javascript,我只想包含在我的Phoenix应用程序的某些页面上.

现在我已经在脚本标签中加入了Javascript myapp/web/templates/post/form.html.eex.

我知道我可以将JavaScript移动到web/static/js/app.js...但我不想在每个页面上包含Javascript(仅在2个特定页面上需要).

在我的应用程序中的某些页面上加载此部分Javascript而不重复代码并违反DRY原则的最佳方法是什么？

Answer 1

1.

将所有来自form.html.eex的 javascript 放入其自己的文件中(可能类似于js/posts.js).

在底部添加:

export var Post = { run: function() {
  // put initializer stuff here
  // for example:
  // $(document).on('click', '.remove-post', my_remove_post_function)
}}

2.

在您的app.html中,<script src="#{static_path(@conn, "/js/app.js")}"></script>添加以下内容:

<%= render_existing @view_module, "scripts.html", assigns %>

3.

然后,在您的视图(可能是views/post_view.ex)中,添加如下方法:

def render("scripts.html", _assigns) do
  ~s{<script>require("web/static/js/posts").Post.run()</script>}
  |> raw
end

结论

现在只有在使用post视图时才会加载javascript文件post.js.

Answer 2

这是实现这一目标的一种方法.

脚本标记中包含的JavaScript,您将其移动到单独的文件中.

您将"常规"javascript(将包含在每个页面中)和此自定义javascript(包含在某些特定页面中)划分为单独的目录.例如app/common/standard.js和app/custom/unique.js

您将brunch-config.js修改为如下:

module.exports = {
 files: {
    javascripts: {
      joinTo: {
        'custom.js': /^app[\\\/]common[\\\/][\S*?]\.js/,
        'app.js': /^app[\\\/]common[\\\/][\S*?]\.js/
        }
    }
}

然后在所有页面中包含app.js,

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

但custom.js仅在需要它的页面(或布局)模板中.

<script src="<%= static_path(@conn, "/js/custom.js") %>"></script>