无法运行Backbone.Marionette应用程序

Question

我是Backbone.Marionette的新手，我正在使用相同的电话簿应用程序。我提到this example。

我收到以下错误：

TypeError: Backbone.Model.Extend is not a function        index.html (line 109)
    listAll: function(){

到目前为止我的代码：

            var MyApp = new Backbone.Marionette.Application();

            MyApp.addRegions({
                mainRegion: "#container"
            });

            PhoneDirectory = Backbone.Model.Extend({
                search: function(event){
                    event.preventDefault();
                    $("#results").html("");
                    $.get("lookup_single_phone_number.jsp", { name: $("#name").val() })
                    .done(function(data){
                        $("#results").html(data);
                    })
                    .error(function(error){
                        $("#results").html(error.status + " " + error.statusText);
                    });
                },
                listAll: function(){                        // line # 109
                    $.get("lookup_all_phone_numbers.jsp")
                    .done(function(data){
                        var data = JSON.parse(data);
                        $("#results").html("");
                        var table=$('<table>');
                        table.append('<tr><th>Name</th><th>Phone Number</th></tr>');

                        $.each(data, function(index, value){
                            table.append("<tr><td>" + value + "</td><td>" + index + "</td></tr>");
                        });

                        $("#results").append(table);
                    })
                    .error(function(error){
                        $("#results").html(error.status + " " + error.statusText);
                    });
                }
            });

            PhoneDirectories = Backbone.Collection.Extend({
                model: PhoneDirectory,

                search: function(event){
                    event.preventDefault();
                    $("#results").html("");
                    $.get("lookup_single_phone_number.jsp", { name: $("#name").val() })
                    .done(function(data){
                        $("#results").html(data);
                    })
                    .error(function(error){
                        $("#results").html(error.status + " " + error.statusText);
                    });
                },
                listAll: function(){
                    $.get("lookup_all_phone_numbers.jsp")
                    .done(function(data){
                        var data = JSON.parse(data);
                        $("#results").html("");
                        var table=$('<table>');
                        table.append('<tr><th>Name</th><th>Phone Number</th></tr>');

                        $.each(data, function(index, value){
                            table.append("<tr><td>" + value + "</td><td>" + index + "</td></tr>");
                        });

                        $("#results").append(table);
                    })
                    .error(function(error){
                        $("#results").html(error.status + " " + error.statusText);
                    });
                }
            });

            SinglePhoneNumberView = Backbone.Marionette.ItemView.extend({
                template: "#results_template",
                tagName: 'tr',

                events: {
                    'submit #lookup': 'search',
                    'click #list_all': 'listAll'
                },

                search: function(event){
                    event.preventDefault();
                    $("#results").html("");
                    $.get("lookup_single_phone_number.jsp", { name: $("#name").val() })
                    .done(function(data){
                        $("#results").html(data);
                    })
                    .error(function(error){
                        $("#results").html(error.status + " " + error.statusText);
                    });
                },
                listAll: function(){
                    $.get("lookup_all_phone_numbers.jsp")
                    .done(function(data){
                        var data = JSON.parse(data);
                        $("#results").html("");
                        var table=$('<table>');
                        table.append('<tr><th>Name</th><th>Phone Number</th></tr>');

                        $.each(data, function(index, value){
                            table.append("<tr><td>" + value + "</td><td>" + index + "</td></tr>");
                        });

                        $("#results").append(table);
                    })
                    .error(function(error){
                        $("#results").html(error.status + " " + error.statusText);
                    });
                }
            });

            AllPhoneNumberView = Backbone.Marionette.CompositeView.extend({
                template: "#results_template",
                tagName: 'tr',
                itemView: SinglePhoneNumberView
            });

我做错了什么？对不起，我是Backbone.Marionette的新手。

更新

所以，我决定先让一个按钮工作然后继续。我删除了表单代码并将list_all按钮保留在。

中

更新代码：

        var MyApp = new Backbone.Marionette.Application();

        MyApp.addRegions({
            mainRegion: "#container"
        });

        PhoneDirectory = Backbone.Model.Extend({
            listAll: function(){                        // line # 109
                $.get("lookup_all_phone_numbers.jsp")
                .done(function(data){
                    var data = JSON.parse(data);
                    $("#results").html("");
                    var table=$('<table>');
                    table.append('<tr><th>Name</th><th>Phone Number</th></tr>');

                    $.each(data, function(index, value){
                        table.append("<tr><td>" + value + "</td><td>" + index + "</td></tr>");
                    });

                    $("#results").append(table);
                })
                .error(function(error){
                    $("#results").html(error.status + " " + error.statusText);
                });
            }
        });

        PhoneDirectories = Backbone.Collection.Extend({
            model: PhoneDirectory,

            listAll: function(){
                $.get("lookup_all_phone_numbers.jsp")
                .done(function(data){
                    var data = JSON.parse(data);
                    $("#results").html("");
                    var table=$('<table>');
                    table.append('<tr><th>Name</th><th>Phone Number</th></tr>');

                    $.each(data, function(index, value){
                        table.append("<tr><td>" + value + "</td><td>" + index + "</td></tr>");
                    });

                    $("#results").append(table);
                })
                .error(function(error){
                    $("#results").html(error.status + " " + error.statusText);
                });
            }
        });

        SinglePhoneNumberView = Backbone.Marionette.ItemView.extend({
            template: "#results_template",
            tagName: 'tr',

            events: {
                'click #list_all': 'listAll'
            },

            listAll: function(){
                $.get("lookup_all_phone_numbers.jsp")
                .done(function(data){
                    var data = JSON.parse(data);
                    $("#results").html("");
                    var table=$('<table>');
                    table.append('<tr><th>Name</th><th>Phone Number</th></tr>');

                    $.each(data, function(index, value){
                        table.append("<tr><td>" + value + "</td><td>" + index + "</td></tr>");
                    });

                    $("#results").append(table);
                })
                .error(function(error){
                    $("#results").html(error.status + " " + error.statusText);
                });
            }
        });

        AllPhoneNumberView = Backbone.Marionette.CompositeView.extend({
            template: "#results_template",
            tagName: 'tr',
            itemView: SinglePhoneNumberView
        });

        MyApp.start();

如何获取按钮以在控制台中获取消息？