在 Rails 视图中触发 Coffeescript 函数

发布于 2024-12-18 15:20:56 字数 529 浏览 1 评论 0原文

在我们的一些 Rails 视图中，我们有 javascript 函数，可以异步加载某些数据以填充页面。我们的 application.js 文件加载 assets/javascripts 文件夹中的所有 javascript。

这是我们的一个 haml 视图中的一些内容：

:javascript
  $(function() {
    fetch_all_facebook_invitees();
  });

如果我们将 fetch_all_facebook_invitees 函数定义放在一个 CoffeeScript 文件中，它会加载到每个页面上，因为它们包含在应用程序的所有页面中：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

What's the bestpractice to load javascript for a页？只选择性地执行而不加载整个树？

原文

In some of our Rails views, we have javascript functions that load certain data asynchronously to populate the page. Our application.js file loads all javascript in the assets/javascripts folder.

Here is a bit that's in one of our haml views:

:javascript
  $(function() {
    fetch_all_facebook_invitees();
  });

If we put the fetch_all_facebook_invitees function definition in a coffeescript file, it's loaded on every page because they're included in all pages of the application:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

What's the best practice to loading javascript for a page? Only doing it selectively and not load the entire tree?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怪异←思 2024-12-25 15:20:56

您可以通过内联渲染“部分”咖啡文件来解决此问题。

../assets/javascripts/inline/facebook_invites.js.coffee

确保加载 DOM 时触发文件内的所有事件

$ ->
  # do Facebook stuff

facebook.haml:

= javascript_include_tag "inline/facebook_invites"

然后还有我用来制作控制器/视图特定 Coffee 文件的方法：

application.html.haml：

%body{ :data => { :controller => params[:controller], :action => params[:action]} }

application.js.coffee：

$(document).ready ->
  load_javascript($("body").data('controller'),$("body").data('action'))

load_javascript = (controller,action) ->
  $.event.trigger "#{controller}.load"
  $.event.trigger "#{action}_#{controller}.load"

facebook.js.coffee

$(document).bind 'edit_facebook.load', (e,obj) =>
  # fire on edit facebook controller action

$(document).bind 'show_facebook.load', (e,obj) =>
  # fire on show facebook controller action

$(document).bind 'facebook.load', (e,obj) =>
  # fire on all facebook controller actions

You could solve this by having "partial" coffee files that you render inline.

../assets/javascripts/inline/facebook_invites.js.coffee

Make sure all events inside the file is fired when the DOM is loaded

$ ->
  # do Facebook stuff

facebook.haml:

= javascript_include_tag "inline/facebook_invites"

Then there's also the approach that I use to make controller/view specific Coffee files:

application.html.haml:

%body{ :data => { :controller => params[:controller], :action => params[:action]} }

application.js.coffee:

$(document).ready ->
  load_javascript($("body").data('controller'),$("body").data('action'))

load_javascript = (controller,action) ->
  $.event.trigger "#{controller}.load"
  $.event.trigger "#{action}_#{controller}.load"

facebook.js.coffee

$(document).bind 'edit_facebook.load', (e,obj) =>
  # fire on edit facebook controller action

$(document).bind 'show_facebook.load', (e,obj) =>
  # fire on show facebook controller action

$(document).bind 'facebook.load', (e,obj) =>
  # fire on all facebook controller actions

回复收藏 0 原文

~没有更多了~