0

私はCoffeeScriptとJavaScriptの初心者です。

ここでの作業は、空白のRails3.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の2回のロードまたは間違った順序で問題を抱えていることがわかりました。
これが私の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コンソールで次のエラーが発生します。

Uncaught TypeError：オブジェクト＃にはメソッド'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内で呼び出しているため、jQueryオブジェクトではありません。これを試して：eachthis

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 に答える