0

我是 CoffeeScript 和 JavaScript 新手。

在这里工作是使用一个空白的 Rails 3.2.8 应用程序。
这是直接的布局代码：

<!DOCTYPE html>
<html>
    <head>
      <title>Editor</title>
      <%= stylesheet_link_tag    "application", :media => "all" %>
      <%= csrf_meta_tags %>
    </head>
    <body>
        <%= yield %>
      <%= javascript_include_tag "application" %>
    </body>
</html>

再简单不过了，对吧？现在表单的视图：

<%= form_for(@note) do |f| %>
  <% if @note.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@note.errors.count, "error") %> prohibited this note from being saved:</h2>

      <ul>
      <% @note.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.text_area :body, class: 'tkh-editable' %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

在研究这个主题时，我发现许多程序员遇到了两次加载 jQuery 或加载顺序错误的问题。
以下是我的 application.js 清单文件中的非注释：

//= require jquery
//= require jquery_ujs
//= require tkh_editor/tkh_editor

在 tkh_editor.js.coffee 文件中，如果我只是输入这段代码，它就可以正常工作：

jQuery ->
  $(".tkh-editable").css("border","solid 5px red")

它使用上面的类在我的 textarea 字段周围添加了一个边框。
我正在尝试创建一个插件，但我被困在第 1 步。

为什么以下代码不起作用？

jQuery.fn.extend
  tkhEditor: ->
    return @each ->
      this.css("border","solid 5px red")

jQuery ->
  $(".tkh-editable").tkhEditor()

Chrome 控制台给了我以下错误：

未捕获的类型错误：对象 # 没有方法“css”

请帮助并解释我做错了什么。

4

2 回答 2

5

您可能只需要包装this在 jQuery 中。尝试更换：

this.css("border","solid 5px red")

和：

$(this).css("border","solid 5px red")
于 2012-11-06T12:45:09.140 回答
2

您this在函数内部调用each，因此this不是 jQuery 对象。尝试这个：

jQuery.fn.extend
  tkhEditor: ->
    return @each ->
      jQuery(this).css("border","solid 5px red")

如果要使用$for jQuery，请执行以下操作：

$ = jQuery
$.fn.extend
  tkhEditor: ->
    return @each ->
      $(this).css("border","solid 5px red")

由于 coffeescript 编译器产生一个 IIFE（立即调用函数表达式），你不能修改它的参数。

于 2012-11-06T12:49:37.337 回答