在Backbone中运行时未定义appView

时间:2014-12-17 21:01:45

标签: javascript backbone.js underscore.js

我试图实例化Backbone集合视图的最基本版本,但Backbone告诉我我的appView(DictionaryView();)不是一个函数。我已经仔细考虑了它的语法错误,但我不知道是什么导致了这个错误。

  `Uncaught TypeError: undefined is not a function
 backbone.js:1566 s
 index.html:102 (anonymous function)
 jquery.js:3073 
 jjquery.js:3185 
 k.fireWithjquery.js:3391 
 n.extend.readyjquery.js:3407 `

<script>

    (function($){

    //---------SINGLE ENTRY MODEL----------
            var Entry = Backbone.Model.extend({
                defaults: function(){
                    return{
                        word: '',
                        definition: ''
                    }
                }
            });

        //------------ENTRY MODEL COLLECTION------------
            var EntryList = Backbone.Collection.extend({
                model: Entry
            });

        //-----INSTANCIATE COLLECTION----
        var dictionary = new EntryList();

        //-----SINGLE ENTRY VIEW------
        var EntryView = new Backbone.View.extend({
            model: new Entry(),
            tagName:'div',

            initialize: function(){
                this.template = _.template($("#dictionary_template").html());

            },

            render: function(){
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
        });

        //--------------DICTIONARY VIEW----------------
        var DictionaryView = new Backbone.View.extend({
            model: dictionary,
            el: $('#entries'),

            initialize: function(){
                this.model.on('add', this.render, this);
                this.model.on('delete', this.render, this);

            },

            render: function(){
                var self = this;
                self.$el.html('');
                _.each(this.model.toArray(), function(entry, i){
                    self.$el.append((new EntryView({model: entry})).render().$el);
                });

                return this;
            }
        });


        //-------BINDING DATA ENTRY TO NEW MODEL/VIEW-------
        $(document).ready(function(){
            $('#new-entry').submit(function(ev){
                var entry = new Entry({word: $('#word'), definition: $('#definition').val()});

                dictionary.add(entry);

                console.log(dictionary.toJSON());

                $('#new-entry').children('input').val();

                return false;
            });
            //PROBLEM LINE
            var appView = new DictionaryView();
        });
     })(jQuery);    

    </script>
     <!-- TEMPLATE -->
    <script type="text/template" id="dictionary_template">
        <span class="word"><%= word %></span>
        <span class="definition"><%= definition %></span>
        <a href="#" class="edit"><[edit]</a>
        <a href="#" class="delete"><[delete]</a>
      </script>

1 个答案:

答案 0 :(得分:1)

变化:

var DictionaryView = new Backbone.View.extend({

要:

var DictionaryView = Backbone.View.extend({

那应该解决它。您正在创建一个新的类声明,而不是实例化一个新对象。 修改:与EntryView相同的错误。