1

我正在尝试将骨干与咖啡脚本一起使用，而不是 javascript：

TodoItem = Backbone.Model.extend(
  toggleStatus: ->
    if @.get 'status' is "incomplete"
      @.set 'status': 'complete' 
    else
      @.set 'status': 'incomplete'
    @.save()  
    )

todoItem = new TodoItem(
  description: 'I play the guitar'
  status: 'incomplete'
  id: 1
)

TodoView = Backbone.View.extend(
  tagName: 'div'
  id: "box"
  className: 'red-box'

  events: 
    "click h3": "alertStatus"
    'change input': 'toggleStatus'

  template: 
    _.template "<h3> <input type=checkbox #{ print "checked" if status is "complete"} /> <%= description %></h3>"

  initialize: ->
    @.model.on 'change', @.render, @
    @.model.on 'destroy', @.remove, @

  toggleStatus: ->
    @.model.toggleStatus()

  alertStatus: ->
    alert('Hey you clicked the h3!')

  remove: ->
    @.$el.remove()

  render: ->
    @.$el.html @.template(@.model.toJSON())
)

todoView = new TodoView({model: todoItem})
todoView.render()
console.log todoView.el

如果我在控制台中尝试：

todoItem.set({description: 'asdfadfasdfa'});

我得到：

ReferenceError: todoItem is not defined

此外，我看不到我体内的 div：

<div id="box" class="red-box">
  <h3>
  <input type="checkbox" undefined>
  "I play the guitar"
  </h3>
 </div>

但我可以在我的控制台中看到这个 div 很好。

错误在哪里？

谢谢！

4

1 回答 1

1

CoffeeScript 的优点之一是您可以@foo使用@.foo. 写得少一点，读起来好一点。

您不必使用 Backbone 的.extend()，因为 CoffeeScript 具有以完全兼容的方式工作的类：

class TodoView extends Backbone.View
  tagName: 'div'
  id: 'box' # don't do this if you have more than one TodoView on the page at once
  className: 'red-box'

todoItem未定义，因为 CoffeeScript 会将您的所有代码包装在“立即执行的函数表达式”中，从而防止变量泄漏到全局范围（这是一件好事）。从文档：

尽管为了清楚起见在本文档中被隐藏，但所有 CoffeeScript 输出都包装在一个匿名函数中：(function(){ ... })();这个安全包装器与var关键字的自动生成相结合，使得意外污染全局命名空间变得极其困难。

如果要检查局部变量，请在 Chrome 的调试器或 Firebug 中设置断点。

我担心这段代码：

_.template "... #{ print "checked" if status is "complete"} ..."

是什么print？你在哪里定义的？就此而言，在哪里status？你的意思是@status？

最后，您没有看到的原因div是您从未将它添加到 DOM。.render()呈现元素...但它不会自动为您将其插入页面。你必须自己做：

todoView.render()
$('body').append(todoView.el) # (or wherever you want it to go)
于 2013-02-02T18:36:52.243 回答