Javascript 视图中的el在测试主干中未定义
我想从主干视图测试我的视图。但我遇到了问题,我尝试使用Javascript 视图中的el在测试主干中未定义,javascript,unit-testing,backbone.js,Javascript,Unit Testing,Backbone.js,我想从主干视图测试我的视图。但我遇到了问题,我尝试使用this.$el获取视图的元素,结果为空。当我检查this.el时,结果是undefined 当我尝试使用$(“#container”)搜索它时,它是存在的,当我运行它时,它也可以工作。标签是存在的, 这是我的查看代码 define([ 'jquery', 'underscore', 'backbone', 'text!templates/setting.html', 'js/service/Config' ],fu
this.$el
获取视图的元素,结果为空。当我检查this.el
时,结果是undefined
当我尝试使用$(“#container”)
搜索它时,它是存在的,当我运行它时,它也可以工作。标签是存在的,
这是我的查看代码
define([
'jquery',
'underscore',
'backbone',
'text!templates/setting.html',
'js/service/Config'
],function($, _, Backbone, settingTemplate, Config){
var settingView = Backbone.View.extend({
el: $("#container"),
initialize: function(){
_.bindAll(this, "render");
},
render: function(){
data = {}
var compiledTemplate = _.template(settingTemplate, data);
this.$el.append(compiledTemplate);
this.delegateEvents();
DroneConfig.getAll(function(obj){
$('input[name=url]').val(obj.url);
$('input[name=repo]').val(obj.repo);
$('input[name=hostname]').val(obj.hostname);
$('textarea[name=api_key]').val(obj.api_key);
});
}
});
return settingView;
});
这是我的测试代码:
define(['js/view/settingView','text!templates/setting.html'], function(SettingView, texts){
describe("Setting View", function() {
it('render successfully', function() {
$('body').append(__html__['app/js/test/test.html']);
$(document).ready(function(){
var x = new SettingView();
x.render();
expect($('#setting').html()).to.not.be.empty;
});
});
});
});
你知道为什么会这样吗?我甚至尝试添加$(document.ready(function(){})
。谢谢请记住,$(“#容器”)
是一个函数调用,因此您的代码与此等效:
var $el = $('#container');
var settingView = Backbone.View.extend({
el: $el,
//...
});
这意味着在执行主干.View.extend
时,代码将查找容器。显然,发生这种情况时没有#container
元素,因此当主干尝试取消jQuery查询您提供的el
时,el
会有一个未定义的值
最简单的解决方案是将jQuery内容留给主干网,只需使用el的选择器即可:
el: '#container'
然后主干网将在需要构建时咨询DOM,那时您应该有一个#容器
。您需要将一个DOM元素传递到实例的构建中new SettingView(“”
),该div将成为您的el
。