1

このコードを Backbone.js に書き換えたいのですが、どうすればよいですか?

app/assets/javascripts/views/plots/plots_index.js.coffee

class App.Views.PlotsIndex extends Backbone.View
  template: JST['plots/index']

  events:
    'submit #new_plot': 'createPlot'

  initialize: ->
    @collection.on('reset', @render, this)
    @collection.on('add', @appendPlot, this)

  render: =>
    $(@el).html(@template())
    @collection.each(@appendPlot)
    this

  appendPlot: (plot) =>
    view = new App.Views.Plot(model: plot)
    @$('#all_plots').append(view.render().el)

  createPlot: (event) ->
    event.preventDefault()
    attributes = name: $('#new_plot_name').val()
    @collection.create attributes,
      wait: true
      success: ->  $('#new_plot')[0].reset()
      error: @handleError

アプリ/アセット/テンプレート/プロット/index.jst.eco

<textarea class="input" id="new_plot_name" name="name" rows="5"  onClick="if(this.value == 'Type something') { this.value = ''; }">Type something</textarea> 
<input class="generate_button col2" name="commit" type="submit" value="Submit" />

onClick の関数をビューコードに入れたいのですが、よくわかりません。私はこのようなことを試しましたが、運がありません:

    events:
        'click #new_plot_name' : 'clear'

    clear: =>
    if @$('#new_plot_name').value == 'Type something'
        @$('#new_plot_name').value = ''

それを行う方法は何になるので、次のようなことができます：

 <textarea class="input" id="new_plot_name" name="name" rows="5"  onClick="<%= @clear(this) %>">Type something</textarea>
4

1 に答える 1

1

問題はあなたのclear方法にあると確信しています。

clear: =>
  if @$('#new_plot_name').value == 'Type something'
    @$('#new_plot_name').value = ''

と言うとx = @$('#new_plot_name')、 で jQuery オブジェクトを取得しますx。jQuery オブジェクトは通常value、DOM オブジェクトのようにプロパティを持ちません。jQuery オブジェクトにラップされたフォーム要素の値を操作する場合は、次のvalメソッドを使用します。

clear: =>
  if @$('#new_plot_name').val() == 'Type something'
    @$('#new_plot_name').val('')

次にonClick、テンプレートから属性を削除します。

<textarea class="input" id="new_plot_name" name="name" rows="5">Type something</textarea>

CoffeeScript ( @clear(this)) はそこでは機能せず、そのコンテキストで必要なものでも@なく、オブジェクト引数も取りません。また、これはバックボーンであるため、イベントはビューの を介して接続する必要があります。thisclearevents

デモ: http://jsfiddle.net/ambiguous/gfK4L/

とはいえ、人々はTabフォーム内を移動するのに慣れているので、おそらくフォーカス イベント (クリックではなく) を使用してプレースホルダーを削除し、ぼかしイベントを使用して元に戻すことをお勧めします。

placeholderこの種のことにも属性を使用する必要があります。HTML5 以外のブラウザーをサポートする必要がある場合は、この方法よりもうまく機能するシムとプラグインがたくさんありますclear。プレースホルダーの動作を正しく行うのは驚くほどトリッキーです。たとえば、送信ハンドラーに実際に何かを入力したかどうかを確認していないため、多くのフォームをname送信することになるでしょう。'Type something'

また、必要はありません$(@el)。Backbone は既に でラップ@elされた jQuery を提供してい@$elます。そしてあなたのinitialize：

initialize: ->
  @collection.on('reset', @render, this)
  @collection.on('add', @appendPlot, this)

onsincerenderにコンテキスト引数を指定する必要はなく、appendPlotすでにバインドされているメソッドです。これだけで十分です。

initialize: ->
  @collection.on('reset', @render)
  @collection.on('add', @appendPlot)
于 2012-09-02T19:09:59.103 に答える