appView 在运行时未定义在主干中



我正在尝试实例化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>

更改:

var DictionaryView = new Backbone.View.extend({

自:

var DictionaryView = Backbone.View.extend({

这应该可以解决它。您正在创建一个新的类声明,而不是实例化新对象。编辑:您的EntryView相同的错误。

最新更新