Javascript 咖啡脚本，播放！和问题

我一直在尝试这出戏！框架已经使用了几周，Zen tasks示例应用程序已经完成了一半，并且似乎在来自的信息方面存在很大差距

我已经按照描述创建了main.coffee文件，并且应用程序可以很好地编译，但是我得到了以下错误“UncaughtTypeError:object的属性'children'不是函数”

这意味着我试图在HTML元素上调用jQuery，但是我从样本中复制并粘贴了内容，因此无法理解我可以做什么，这对编写教程的人来说一定有用吧

无论如何，我使用的是Play 2.2.0，咖啡脚本的编写如下

class Drawer extends Backbone.View

$ -> 
   drawer = new Drawer el: $("#travelgroups")

class Drawer extends Backbone.View
initialize: ->
    @el.children("li").each (i,group) ->
        new Group
            el: $(group)
        $("li",group).each (i,travelgroup) ->
            new TravelGroup
                el: $(travelgroup)

下面是生成的main.js文件中显示错误的部分

    Drawer.prototype.initialize = function() {
  return this.el.children("li").each(function(i, group) {
    new Group({
      el: $(group)
    });
    return $("li", group).each(function(i, travelgroup) {
      return new TravelGroup({
        el: $(travelgroup)
      });
    });
  });
};

作为第二个问题，coffee文件本身应该包含“内部”类声明还是应该创建单独的.java类文件？就像我说的，教程章节之间的详细解释有很大的差距，所以我有点困惑，因为coffescript对我来说是全新的，以前从未见过实际的.java类文件之外的类声明

编辑

下面是完整的咖啡脚本文件。凹痕已恢复原状

$(".options dt, .users dt").live "click", (e) ->
    e.preventDefault()
    if $(e.target).parent().hasClass("opened")
        $(e.target).parent().removeClass("opened")
    else
        $(e.target).parent().addClass("opened")
        $(document).one "click", ->
            $(e.target).parent().removeClass("opened")
    false

$.fn.editInPlace = (method, options...) ->
    this.each ->
        methods = 
            # public methods
            init: (options) ->
                valid = (e) =>
                    newValue = @input.val()
                    options.onChange.call(options.context, newValue)
                cancel = (e) =>
                    @el.show()
                    @input.hide()
                @el = $(this).dblclick(methods.edit)
                @input = $("<input type='text' />")
                    .insertBefore(@el)
                    .keyup (e) ->
                        switch(e.keyCode)
                            # Enter key
                            when 13 then $(this).blur()
                            # Escape key
                            when 27 then cancel(e)
                    .blur(valid)
                    .hide()
            edit: ->
                @input
                    .val(@el.text())
                    .show()
                    .focus()
                    .select()
                @el.hide()
            close: (newName) ->
                @el.text(newName).show()
                @input.hide()
        # jQuery approach: http://docs.jquery.com/Plugins/Authoring
        if ( methods[method] )
            return methods[ method ].apply(this, options)
        else if (typeof method == 'object')
            return methods.init.call(this, method)
        else
            $.error("Method " + method + " does not exist.")


class Drawer extends Backbone.View

$ -> 
     drawer = new Drawer el: $("#travelgroups")

class Drawer extends Backbone.View
    initialize: ->
        @el.children("li").each (i,group) ->
            new Group
                el: $(group)
            $("li",group).each (i,travelgroup) ->
                new TravelGroup
                    el: $(travelgroup)

class Group extends Backbone.View
    events:
        "click    .toggle"          : "toggle"
        "click    .newTravelGroup"  : "newTravelgroup"
    toggle: (e) ->
        e.preventDefault()
        @el.toggleClass("closed")
        false
    newProject: (e) ->
        @el.removeClass("closed")
        r = jsRoutes.controllers.TravelGroups.add()
        $.ajax
            url: r.url
            type: r.type
            context: this
            data:
                group: @el.attr("data-group")
            success: (tpl) ->
                _list = $("ul",@el)
                _view = new TravelGroup
                    el: $(tpl).appendTo(_list)
                _view.el.find(".name").editInPlace("edit")
            error: (err) ->
                $.error("Error: " + err)

class TravelGroup extends Backbone.View

$（“.options dt，.users dt”）.live“点击”（e）->
e、 预防默认值（）
if$（e.target）.parent（）.hasClass（“打开”）
$（e.target）.parent（）.removeClass（“打开”）
其他的
$（e.target）.parent（）.addClass（“已打开”）
$（文档）。只需单击一次->
$（e.target）.parent（）.removeClass（“打开”）
假的
$.fn.editInPlace=（方法、选项…）->
这个.每个->
方法=
#公共方法
初始化：（选项）->
有效=（e）=>
newValue=@input.val（）
options.onChange.call（options.context，newValue）
取消=（e）=>
@el.show（）
@input.hide（）
@el=$（this.dblclick（methods.edit）
@输入=$（“”）
.insertBefore（@el）
.keyup（e）->
开关（如钥匙代码）
#输入键
当13时，则$（this.blur（）
#逃生钥匙
当27时，然后取消（e）
.blur（有效）
.hide（）
编辑：->
@输入
.val（@el.text（））
.show（）
.focus（）
.选择（）
@el.hide（）
关闭：（新名称）->
@el.text（newName.show（））
@input.hide（）
#jQuery方法：http://docs.jquery.com/Plugins/Authoring
if（方法[方法]）
返回方法[method]。应用（此，选项）
else if（typeof方法=='object'）
return methods.init.call（this，method）
其他的
$.error（“方法“+方法+”不存在。”）
类抽屉扩展了主干.View
$ -> 
抽屉=新抽屉el:$（“#旅行组”）
类抽屉扩展了主干.View
初始化：->
@el.儿童（“li”）。每个（i，组）->
新组
el:$（组）
$（“li”，集团）。每个（i，travelgroup）->
新旅游集团
el:$（travelgroup）
类组扩展主干。视图
活动：
“单击。切换”：“切换”
单击.newTravelGroup:“newTravelGroup”
切换：（e）->
e、 预防默认值（）
@el.切换类别（“关闭”）
假的
新项目：（e）->
@el.removeClass（“关闭”）
r=jsRoutes.controllers.TravelGroups.add（）
$.ajax
url:r.url
类型：r型
背景：这
数据：
组：@el.attr（“数据组”）
成功：（第三方物流）->
_列表=$（“ul”，@el）
_视图=新TravelGroup
el:$（第三方物流）。附件（清单）
_view.el.find（“.name”）.editInPlace（“编辑”）
错误：（err）->
$.error（“error:+err”）
类TravelGroup扩展主干。视图

和HTML如下所示。。。group.scala.html

@(group: String, travelgroups: List[TravelGroup])

<li data-group="@group">
    <span class="toggle"></span>
    <h4 class="groupName">@group</h4>
    <span class="loader">Loading</span>
    <dl class="options">
        <dt>Options</dt>
        <dd>
            <button class="newTravelGroup">New travel group</button>
            <button class="deleteGroup">Remove group</button>
        </dd>
    </dl>
    <ul>
        @travelgroups.map { travelgroup =>
            @views.html.travelgroups.item(travelgroup)
        }
    </ul>
</li>

@（组：字符串，旅行组：列表[TravelGroup]）

@团体
加载
选择权
新旅游团
删除组

@travelgroups.map{travelgroup=>
@views.html.travelgroups.item（travelgroup）
}

item.scala.html

@(travelgroup: TravelGroup)

<li data-project="@travelgroup.id">
    <a class="name" href="#">@travelgroup.name</a>
    <button class="delete" href="#">Delete</button>
    <span class="loader">Loading</span>
</li>

@（travelgroup:travelgroup）

删除
加载

您的缩进乱七八糟，请修复它。缩进在CoffeeScript程序中非常重要，现在您的程序包含几个错误。我们如何区分粘贴代码时引入的错误和实际存在的错误呢？我试图一字不差地坚持教程，说明会暗示（实际上没有这样说），应该做出两个声明，或者我只是错误地阅读了它？米格尔：请参阅编辑后的文章，了解更多缩进正确的代码示例。谢谢你的帮助。你在档案里已经申报了两次班级抽屉。你也可以在这里查看代码