_.bindAll 在渲染 Backbone 视图时不工作
_.bindAll isn't working while rendering a Backbone view
除了处理其上下文之外,我还试图理解 backbone bindAll
函数。在这种情况下,以下实现不起作用。
创建视图以从列表中插入数据。
_.bindAll (this, 'render');
能看出函数中this的上下文吗? $(this.el)
是 undefined
。它不应该使用 _bindAll
吗?
以下不追加到ol
列表
$(this.el).append('idCurso->', cursoModelo.get('idCurso'),' titulo-> ', cursoModelo.get('titulo'));
$(this.el).append('hola caracola');`.
HTML
<ol id="ListaLibros"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
JS
// create a view to print the model data in the html
var ListaLibrosView = Backbone.View.extend({
el: '#ListaLibros',
initialize: function() {
this.collection = cursoCollection;
_.bindAll(this, 'render');
this.render();
},
render: function() {
console.log("funcion render");
var listaLibrosLi = '';
this.collection.each(function(cursoModelo) {
$(this.el).append('idCurso->', cursoModelo.get('idCurso'), ' titulo-> ', cursoModelo.get('titulo'));
$(this.el).append('hola caracola');
});
}
});
您没有直接在 render
中使用 using this.el
,而是在 _.each()
回调中使用,这是另一个具有不同上下文的函数。您需要确保它也具有相同的上下文,您可以像 _.each(function(){}, this)
一样简单地实现它,因为它接受上下文作为第二个参数。
或者,如果您使用的是 ES6,则可以使用箭头函数作为回调,它不会像 _.each(i => {})
这样创建新的上下文
, though you're using this.collection.each
, it's just a proxy to Underscore's _.each
.
此外,。你应该直接使用this.$el
。
请注意 _.bindAll
is an Underscore's function 与 Backbone 无关。由于问题来自嵌套的每个回调上下文,一旦修复,您将根本不需要 _.bindAll
。
事实上,我从来不需要 _.bindAll
并且在教程中看到大多数时候是因为它已过时或使用不当。
除了处理其上下文之外,我还试图理解 backbone bindAll
函数。在这种情况下,以下实现不起作用。
创建视图以从列表中插入数据。
_.bindAll (this, 'render');
能看出函数中this的上下文吗?$(this.el)
是undefined
。它不应该使用_bindAll
吗?以下不追加到
ol
列表$(this.el).append('idCurso->', cursoModelo.get('idCurso'),' titulo-> ', cursoModelo.get('titulo')); $(this.el).append('hola caracola');`.
HTML
<ol id="ListaLibros"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
JS
// create a view to print the model data in the html
var ListaLibrosView = Backbone.View.extend({
el: '#ListaLibros',
initialize: function() {
this.collection = cursoCollection;
_.bindAll(this, 'render');
this.render();
},
render: function() {
console.log("funcion render");
var listaLibrosLi = '';
this.collection.each(function(cursoModelo) {
$(this.el).append('idCurso->', cursoModelo.get('idCurso'), ' titulo-> ', cursoModelo.get('titulo'));
$(this.el).append('hola caracola');
});
}
});
您没有直接在 render
中使用 using this.el
,而是在 _.each()
回调中使用,这是另一个具有不同上下文的函数。您需要确保它也具有相同的上下文,您可以像 _.each(function(){}, this)
一样简单地实现它,因为它接受上下文作为第二个参数。
或者,如果您使用的是 ES6,则可以使用箭头函数作为回调,它不会像 _.each(i => {})
this.collection.each
, it's just a proxy to Underscore's _.each
.
此外,this.$el
。
请注意 _.bindAll
is an Underscore's function 与 Backbone 无关。由于问题来自嵌套的每个回调上下文,一旦修复,您将根本不需要 _.bindAll
。
事实上,我从来不需要 _.bindAll
并且在教程中看到大多数时候是因为它已过时或使用不当。