Question

我想将此代码重写为Backbone.js，我应该怎么做？

应用程序/资产/ Javascript角/视图/曲线/ 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>

Answer 1

我很确定问题出在您的clear方法中。

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

当您说x = @$('#new_plot_name')时，您会在x中获得一个jQuery对象。 jQuery对象通常不像DOM对象那样具有value属性;如果你想使用包装在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)）不会在那里工作，@和this都不是你想要的，并且clear不会占用一个对象争论无论如何。此外，这是Backbone所以事件应该通过视图的events连接起来。

演示：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)

您不需要向on提供上下文参数，因为render和appendPlot已经是绑定方法，只需这样做：

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

如何使这个示例函数适应Backbone？

1 个答案: