我正在使用集合视图来呈现我的模型视图数组。我添加了一种从现有集合视图中删除单个模型视图的方法,并尝试在新的el:元素中重新呈现它。

我使用collection.get(this.model)将模型保存到变量中,然后将该变量添加到新集合中,该集合是与新DOM元素关联的新集合视图的模型,然后重新使用相同的集合视图render方法。当我用console.log()这个新集合时,我看到的是我从旧集合中选取的模型,但是它并没有呈现在页面上。

<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();
        var saved = new EntryList();

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

            events:{
                'click .edit': 'edit',
                'click .delete': 'delete',
                'keypress .definition': 'updateOnEnter',
                'click .save': 'save'
            },

            delete: function(ev){
                ev.preventDefault;
                dictionary.remove(this.model);

            },

            edit: function(ev){
                ev.preventDefault;
                this.$('.definition').attr('contenteditable', true).focus();

            },
            //method that adds existing model to new collection
            save: function(ev){
                ev.preventDefault;
                var savedEntry = dictionary.get(this.model);
                dictionary.remove(this.model);
                saved.add(savedEntry);
                console.log(savedEntry.toJSON());

            },
            close: function(){
                var definition = this.$('.definition').text();
                this.model.set('definition', definition);
                this.$('.definition').attr('contenteditable', false).blur();

            },

            updateOnEnter: function(ev){
                if(ev.which == 13){
                    this.close();
                }
            },

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

            },

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

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

            initialize: function(){
                this.model.on('add', this.render, this);
                this.model.on('remove', 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;
            }
        });

        //---------SAVED ENTRY VIEW-----------
        var SavedView = Backbone.View.extend({
            model: saved,
            el: $('#saved'),

            initialize: function(){
                this.model.on('save', this.savedRender, this);
            },
            //method that renders new collection view with different el:
            savedRender: function(){
                var self = this;
                self.$el.html('');
                _.each(this.model.toArray(), function(saved, i){
                    self.$el.append((new EntryView({model: savedEntry})).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').val(), definition: $('#definition').val()       });

                dictionary.add(entry);
                dictionary.comparator = 'word';

                console.log(dictionary.toJSON());

                $('.form-group').children('input').val('');

                return false;
            });
            var appView = new DictionaryView();
        });


        //--------------ROUTER----------------
        var Router =  Backbone.Router.extend({
            routes:{
                '':'home'
            }
        });
        var router = new Router();
        router.on('route:home', function(){
            console.log('router home');
        });
        Backbone.history.start();
    })(jQuery);

    </script>

最佳答案

这里有很多问题。

首先,您没有SavedView的实例。 var SavedView = Backbone.View.extend(...);语句只是定义SavedView类。为了拥有该类的活动实例,必须使用new运算符初始化一个实例。您将在代码中的某处需要以下行(一个合适的位置将在jQuery ready处理程序的末尾):

var saved_view = new SavedView();


接下来,我们将研究EntryView类的save方法。 var savedEntry = dictionary.get(this.model);语句是完全不必要的,因为我们知道dictionary.get(this.model)将返回this.model-我们显然已经有一个实例。因此,我们可以从此方法中消除混乱,并保留以下内容:

ev.preventDefault;
saved.add(this.model);
dictionary.remove(this.model);


但是,我们仍未到达目的地。如果我们将注意力转向SavedView类定义,我们会看到它将其render方法绑定到其集合saved对象上的'save'事件。它不是我们应该绑定的“保存”事件,而是“添加”事件-因为这是在向saved添加模型时触发的事件:

this.model.on('add', this.savedRender, this);


如果现在测试我们的代码,我们应该在savedEntry中的SavedView.savedRender上被引用错误指责。看来这是一个错字,原意是“保存”的。 (您将在下面注意到,除了更正输入错误之外,我还从该表达式中删除了一组括号,这些括号没有任何作用,只是使代码的可读性差):

self.$el.append(new EntryView({ model: saved }).render().$el);


编辑:

回答您有关saved方法中SavedView.savedRender变量的后续问题:

在这种情况下,saved对象是单个Entry模型。您感到困惑的原因是我们正在重新使用变量名称“ saved”。在_.each回调中,我们定义了第一个参数称为“保存”;此“保存”是回调的本地变量,与先前定义的EntryList集合无关。在我们的回调中,savedsaved集合的一个元素(喜欢!)-这就是为什么变量命名很重要的一课。

当我继续在savedRender方法中更改“已保存”的名称时,我注意到正在做出其他一些重构。我在下面列出了我的重构:


使用Backbone(http://backbonejs.org/)的目的是使我们能够访问对象(模型)和数组(集合)的方便助手。骨干集合有一个each方法,我们可以使用它,而不用将我们的集合传递给Underscore(http://underscorejs.org/each
如上所述,saved是我们的each回调参数的可怕名称,因为它在概念上与集合名称冲突。因为saved是Entry模型的集合,所以“ entry”是一个更合适的名称。
Backbone允许我们将上下文传递给我们的每个回调,该回调将成为该回调中的this。这使我们可以跳过在this变量中缓存self的步骤。


我重构的savedRender变为:

savedRender: function () {
    this.$el.empty();
    this.model.each(function (entry) {
        this.$el.append(new EntryView({ model: entry }).render().$el);
    }, this);

    return this;
}

10-05 20:48
查看更多