Question

                    RoomsDGView = Backbone.View.extend({
                    collection: roomcollection,
                    initialize: function(){
                        var template = _.template( $("#search_template").html(), {} );
                        this.$el.html( template );
                        this.collection.bind('add', this.modeladded);
                        this.collection.bind('remove', this.modelremoved);
                        this.collection.bind('change', this.collectionchanged);
                        console.log(this);
                        this.render();
                    },
                    render: function(){
                        // Compile the template using underscore
                        console.log("running the render function...");
                        //renderrender();
                        /*$("#roomsList").jqGrid('clearGridData');
                        roomcollection.each(function (room,i){
                            var temp = jQuery.parseJSON(JSON.stringify(room));
                            $("#roomsList").jqGrid('addRowData', i,{idrooms: temp["idrooms"], roomname: temp["roomname"],
                            occupants: temp["occupants"]});
                        });*/
                    },
                    events: {
                        "click input[type=button]": "doSearch"  
                    },
                    doSearch: function(){
                        // Button clicked
                        console.log(this);
                    },
                    modeladded: function() {
                        console.log("room added...");
                        $("#roomsList").jqGrid('clearGridData');
                        //My intent is to call the views render function
                        //her. I tried using this.render() and also 
                        //this.collection.bind('add', this.modeladded(this));
                        //modeladded: function(view) {
                        //     view.render();
                        console.log(this);
                    },
                    modelremoved: function() {
                        console.log("room removed...");
                        $("#roomsList").jqGrid('clearGridData');
                    },
                    collectionchanged: function() {
                        console.log("room changed...");
                        $("#roomsList").jqGrid('clearGridData');
                    }
                });

我已经尝试了很多不同的方法来调用视图渲染：从代码内部的方法为modeladded：。在添加的模型中使用this.render表明该对象在该点没有渲染功能。我也试过传递视图，如：

this.collection.bind（＆＃39; add＆＃39;，this.modeladded（this））;

modeladded：function（view）{ view.render（）;

这也会导致控制台错误，无法找到render（）。有谁知道如何调用视图渲染：来自内部模式？

暂时我将渲染函数从视图渲染中移出：并且在全局范围内声明为声明renderGlobal（）的JavaScript函数，我知道它确实有效，但我不认为这是真的backbone.js方式。

这是控制台出现的错误：未捕获的TypeError：对象[object Object]没有方法＆＃39; render＆＃39;

感谢您发帖....

Answer 1

您使用bind (AKA on)绑定事件处理程序：

this.collection.bind('add', this.modeladded);

但是，和JavaScript一样，函数内部this的值取决于函数的调用方式，而不是函数的定义方式（当然忽略绑定函数）。您没有在任何地方为您的功能指定特定的this，因此您在调用时无法获得任何特定的this。如果你给bind第三个上下文参数：

this.collection.bind('add', this.modeladded, this);
// ------------------------------------------^^^^

然后Backbone会使用特定的modeladded致电this，您会发现this内的modeladded将是您的观点。

您还可以使用_.bind，Function.prototype.bind或$.proxy生成回调的绑定版本：

this.collection.bind('add', _(this.modeladded).bind(this));
this.collection.bind('add', this.modeladded.bind(this));
this.collection.bind('add', $.proxy(this.modeladded, this));

所有这些都会产生新的功能，因此您无法在某处隐藏绑定功能而无法unbind它们。当您可以选择明确指定上下文（AKA this）时，您通常会避免使用这些。

还有listenTo：

listenTo object.listenTo(other, event, callback)

告诉对象在其他对象上收听特定事件。使用此表单而不是other.on(event, callback, object)的优点是 listenTo 允许对象跟踪事件，并且可以一次性删除它们稍后的。始终使用对象作为上下文调用回调。

所以你可以（并且应该）这样说：

this.listenTo(this.collection, 'add', this.modeladded);

这样可以为您提供所需的this，并在您完成这些操作后更轻松地清理事件处理程序。与您正在使用的其他事件处理程序类似。

BackboneJS从绑定到集合的事件调用视图呈现函数

1 个答案: