标签: coffeescript

来自Asset Pipeline,我可以在其中定义加载javascript文件的特定顺序,如下所示:

//= require jquery
//= require some_file
//= require_tree ./some/directory
//= require other_directory/some_file
//= require_tree ./directory

如何在早午餐配置中表达此特定订单？

提前致谢.

我正在使用GruntJS和grunt-contrib-coffee.它很棒!在Watch插件的帮助下,它甚至更好.但是我怀疑:

我有两个文件夹,一个是我的coffeescript文件,另一个是我的(编译过的)js文件.看起来像这样

root_folder
|--- public
     |--- libs
     |--- ppalmeida <= here are my .js compiled files from src_client coffeescripts
          |--- controllers
          |--- core
               |--- Main.js
          |--- models

|--- src_client <= here are my .coffee files
        |--- controllers
        |--- core
             |--- Main.coffee
        |--- models

当我使用coffee --output --compile命令构建时,文件夹结构被保留:Coffeescript cli编译"core"文件夹并在Main.js中.

但是当我运行GruntJS时,它将所有文件放在同一个文件夹(ppalmeida)中.所以控制器,核心,模型文件被扔在同一个文件夹中,我不想要.

这是我的glob_to_multiple配置:

coffee:
        glob_to_multiple:
            expand: true,
            flatten: true,
            cwd: 'src_client/',
            src: ['**/*.coffee'],
            dest: 'public/ppalmeida/',
            ext: '.js'

所以,最后我得到了这样的东西:

root_folder
|--- public
     |--- libs
     |--- …

我想要

testFunction: () ->
  console.log "testFunction"
  async.series(
    (->
      console.log "first"
    ),
    (-> 
      console.log "second"
    )
  )

我也试过没有成功

testFunction: () ->
  console.log "testFunction"
  async.series(
    (->
      console.log "first"
      return undefined
    ),
    (-> 
      console.log "second"
      return undefined
    )
  )

要运行,我希望控制台输出"testFunction","first","second",但我得到"testFunction","second",看起来coffeescript使用隐式返回有问题,(我想).

附件是从上面的coffeescript编译的javascript输出的屏幕截图.

为了提高页面加载速度,我通过AJAX实现了创建注释.这很简单而不是重量级.在控制器动作中我有:

def create
    @comment = @commentable.comments.new(params_comment)
    respond_to do |format|
      if @comment.save
        flash.now[:notice] = "Your comment added."
        @response = {comment: @comment, model: @commentable}
        format.js { @response }
        format.html { redirect_to @commentable  }
      else
        format.js { render nothing: :true, status: :not_acceptable }
        format.html { redirect_to @commentable, status: :not_acceptable  }
      end
    end
  end 

和js文件:

$("<%= escape_javascript( render 'comments/comment', @response)%>").appendTo(".comments").hide().fadeIn(500)
$('.notice-wrapper').html("<%= j(render partial: 'shared/notice') %>")
$('.alert').fadeOut(3000)

if $(".no-comments").css("display") is 'block'
  $(".no-comments").hide()
$(".new_answer").hide()
$(".open").show()

但是,我没有加快速度,而是产生了相反的效果.通过JavaScript的响应时间增加了100-200毫秒(总共约300毫秒).这是正常的行为还是我做错了什么？有什么方法可以提高速度吗？

我的表现测试:

UPD: 我的性能测试只用JS文件.

我班上有很多按钮search_camera_btn.

单击按钮然后提交表单.这一步有效.另一方面,它还应该触发按钮单击事件.

我在一个发送Ajax请求的coffeescript文件中编写了事件监听器,但它只适用于第一次点击.

我把代码放在这个要点中.

第一次单击按钮时 Javascript 工作,但后续点击失败.

实际上我在点击事件处理程序的开头放了一条警告消息,但它只在第一次发出警报.并且我的Firbug控制台中没有错误消息.(我认为它只是没有触发click事件处理程序.)

$(".search_camera_btn").click ->
    alert "test"

有很多按钮,无论我点击哪个按钮.它总是在第一次点击时工作.这是我更详细的源代码.下载

有任何想法吗？

我缩小了有缺陷的代码.这是第一次只调用的"准备进入开始"消息.但Firebug Javascript控制台和Rails控制台上没有显示错误.我应该在开发模式中启用某些设置吗？

IW2 = get_camera_list: ->
    console.log("Start")

    ajax_req = $.ajax
      url: "update_camera_list/"
      type: "GET"
      success: (resp) -> 
        # console.log resp

    res = setTimeout (->
      ajax_req
      ), 500
    console.log("End")
    return
jQuery ->
  $(".search_camera_btn").click ->
    console.log("Ready to enter start")    
    IW2.get_camera_list()

编译的CoffeeScript:

var IW2;

IW2 = {
  get_camera_list: function() {
    var ajax_req, res;
    console.log("Start");
    ajax_req = $.ajax({
      url: "update_camera_list/",
      type: "GET",
      success: function(resp) {} …

我有一个动态表单,我从一个带有两个值的下拉字段开始:条形图和趋势图.如果选择条形图,我想显示尺寸值的多选下拉框,而如果选择趋势图,我想显示单选下拉框.

使用下面显示的模板和模型,只有在第一次保存模块后才会显示多选框.如何设置isBarChart变量,以便我可以使用它来确定在保存模块之前所显示的选择框是多选还是单选.

谢谢.

从模板:

%div.select_module_type
  Module type:
  %select{ :class => "module_type" }
    {{#select module_type}}
    %option{ :value => '' }
    %option{ :value => 'bar_chart' } Bar chart
    %option{ :value => 'trend_chart' } Trend chart  
    {{/select}}


%div.select_dimension_value
  Dimension value:
  {{#if isBarChart}}
  %select.dimension_value{ 'multiple' => true }
    {{#select dimension_value}}
    {{/select}}
  {{else}}
  %select.dimension_value
    {{#select dimension_value}}
    {{/select}}
  {{/if}}

从模型:

  isBarChart: ->
    return @get('module_type') == 'bar_chart'

从视图来看:

  showDimensionValuesSelector: (e) ->
    $(@el).find('div.select_dimension_value').hide()
    $(@el).find('div.date').hide()

    this_selector = $(@el).find('select.module_type')

    table = $(@el).find('select.table').val()
    return true if table == ''

    dimension_selector = …

我是咖啡脚本的新手,这个定义可能比这个问题本身更糟糕.

特定

class window.SlideManager                                                                                                                                                                     
  constructor: (@$contentDiv, @analyticsCanvas) ->                                                                                                                                            
    @iterator = Iterator(@slides)                                                                                                                                                             
    @slides = @$contentDiv.data('slides')                                                                                                                                                     

  nextSlide: ->                                                                                                                                                                               
    try {                                                                                                                                                                                     
      url = @iterator.next()                                                                                                                                                                  
    } catch {                                                                                                                                                                                 
      @iterator = Iterator(@slides)                                                                                                                                                           
      url = @iterator.next()                                                                                                                                                                  
    }                                                                                                                                                                                         

    this.renderSlide(url)                                                                                                                                                                     

  renderSlide: (slide) ->                                                                                                                                                                     
    $.get(slide, {nolayout: 'true'}, (data) ->                                                                                                                                                
      @$contentDiv.contents().replaceWith(data)                                                                                                                                               
      window.setupCanvas($(@analyticsCanvas), window.createChartData(window.getVisitCounts($(@analyticsCanvas))))                                                                             
    )                                                                                                                                                                                         

我在第8行(url = @iterator.next())遇到意外=语法错误

有谁知道我可能会缺少什么？

如果这是这个问题的错误堆栈,请道歉.如果是这样,请指引我到正确的网站.

我有一个Rails应用程序,其中的用户可以是三种角色之一的成员:user,admin,或system.我的rails应用程序基本上用作骨干应用程序的JSON后端.所有客户端繁重的工作都是通过coffeescript文件完成的,这些文件在资产管道中处理.

现在,我通过我在application.html.slim关卡中创建的对象将一些用户属性传递到javascript中.看起来像这样的东西:

APP.currentUser = 
  name: "#{@current_user.name}"
  role: "#{@current_user.role}"

在我的主干应用程序的几个地方洒满了这样的调用:

if APP.currentUser.role is 'admin'...

这似乎是非常不安全的,因为任何人的知识可以打开一个开发者控制台中,修改的实例App.currentUser是admin,然后访问前端的管理功能.现在,rails侧面足够聪明,可以检查并确保@current_user在尝试这样做之前可以执行这些功能,但似乎应该有一种方法可以在前端阻止它,而不会将角色发布到javascript中.

我是否过于谨慎或遗失了什么？

CoffeScript代码:

 department = ->
   console.log 1

这编译成js代码:

// Generated by CoffeeScript 1.6.3
(function() {
  var department;

  department = function() {
    return console.log(1);
  };

}).call(this);

我有一个按钮:

<button onclick = "department()" >add department</button>

但是当我点击它时会抛出一个错误:

未捕获的ReferenceError:未定义部门

所以我该怎么做？

我有一个tr,当盘旋时,显示一些链接.

我想在单击链接时禁用悬停行为.要做到这一点,我改变数据属性的值behaviour上tr.但是CSS没有取消对数据属性的更改,并且链接在mouseout上仍然消失.

链接:

tr data-behaviour="has-hover-content"
  td
    = link_to task, data: { behaviour: 'toggle-confirm-spinner hover-content', confirm: "Delete?" }, remote: true do
      = icon_tag 'trash-o'

CoffeeScript的

  # When the user clicks the link
  # Disable the hover behaviour on the tr
  $(document).on 'confirm', '[data-behaviour~="toggle-confirm-spinner"]', ->
    $(@).closest('tr').data 'behaviour', 'false'

具有data-behaviour="has-hover-content"数据属性的任何元素,当悬停时,应显示具有的任何元素data-behaviour="hover-content".

*[data-behaviour~="has-hover-content"] {

  a[data-behaviour~="hover-content"] {
    display: none;
  }

  &:hover a[data-behaviour~="hover-content"] {
    display: inline-block;
  }
}

当用户单击链接时,data-behaviourtr上的data属性设置为false.这意味着将鼠标移除tr应该不再隐藏链接.但是,它仍然存在.我提醒了数据属性的新值,它们正在正确设置.但CSS忽略了这一变化.

怎么会？