2013-04-03 68 views
0

所以我有两个模板,一个是父模板,另一个是包含子视图的模板。我的第一个父视图扩展骨干的观点和渲染方法看起来像调用另一个呈现方法来呈现骨干中的子视图

render: function() { 
    this.$el.append(templates["template-parent-test"](this.model)); 
    return this; 
} 

此父视图上有一个按钮。现在我用这个按钮填充我的视图。它基本上做到这一点:

populateView: function() { 
    // create some dummy test data to match the web service 
    _.each(myModel, function (theModel) { 
     var testView = new childView({ model: theModel }); 
     this.$('div-in-parent-view').append(testView.render().$el); 
    }); 
    } 

这骨干视图扩展Backbone.View及其渲染方法是这样的:

render: function() { 
     console.log("rendering child view"); 
     this.$el.html(this.template({ data: this.model.toJSON() })); 

     return this; 
    } 

所以此工程。但我不想在按钮按钮上填充父视图。当我第一次展示它时,我想填充它,并让按钮执行其实际应该执行的操作。我认为我可以在父视图中从我的渲染函数调用this.populateView(),但实际上没有任何渲染。但如果我在我的按钮事件中执行this.populateView(),它将被渲染。为什么这里有区别?谢谢。

+0

当你在'this。$ el.append'之后的父视图的'render'中调用'this.populateView'时会发生什么? myModel在那个时候是空的吗?我猜测,在父母的渲染myModel是空的,但是当按钮被点击足够的时间已经过去了,集合被填充。 –

+0

@PaulHoenecke在这一点上myModel不是空的。我现在还没有真正与Web服务交流。我只是想模拟观点,以便与网络服务交流。所以我实际上只是创建了一些虚拟测试数据。实际上,我在我的代码中记录了那些我没有包含的数据,并且模型数据都在那里。 – Crystal

+0

而'myModel'被定义在某处?在显示的代码中,它看起来像是全局变量或局部变量,而不是视图的属性。我想这不会是问题,因为你说它是按钮点击工作。我认为你应该展示更多的代码,并且处于产生问题的状态。 –

回答

0

尝试添加this作为third parameter to each。这设定了上下文。如果未指定上下文,则this将为window。由于你的html在父视图render期间还没有出现在页面上,所以它不会找到this.$('#div-in-parent-view')为了向它添加html。

+0

谢谢!你怎么知道这个东西这么好?!?!?!?!?! HAHAH。再次感谢! – Crystal