我在更新AppView的$ el HTML内容时遇到了一些麻烦。
初始化我的AppView时,事情按预期工作。 render()
函数在RoomPickerView
div中呈现#content
的元素,这是预期的,因为状态变量初始化为'pickRoom'作为它的值。
从render()
函数中再次调用handleCheckRoomResult()
时出现问题。预期的行为是#content
的html被PlayerCharacterView
的元素替换,但没有任何改变,我仍然会看到之前的HTML内容(房间选择器)。
如果我在$el.html()
的调用结束时记录AppView的render()
,它会显示正确的HTML,但不知何故,这不会改变实际的DOM。
下面是我的AppView的代码,我的完整应用程序代码(目前还没有那么多)可以找到in this Pastebin。
var AppView = Backbone.View.extend({
el: '#content',
state: 'pickRoom',
roomToken: '',
character: {},
initialize: function() {
console.debug('Initializing AppView');
this.characters = new PlayerCharacterCollection();
this.characters.add(new PlayerCharacter({name: 'George', race: 'Elf', klass: 'Blacksmith'}));
this.characters.add(new PlayerCharacter({name: 'Amy', race: 'Human', klass: 'Sorceress'}));
this.roomPickerView = new RoomPickerView();
this.characterPickerView = new PlayerCharacterPickerView({collection: this.characters});
socket.on('check_room_result', this.handleCheckRoomResult.bind(this));
this.render();
},
handleCheckRoomResult: function(data) {
if (data.result) {
this.roomToken = data.token;
this.state = 'pickCharacter';
this.render();
} else {
console.warn('No room with token ' + data.token + ' exists!');
}
},
render: function() {
var htmlString = '';
if (this.state === 'pickRoom') htmlString = this.roomPickerView.render().$el.html();
if (this.state === 'pickCharacter') htmlString = this.characterPickerView.render().$el.html();
console.log(this);
console.log(this.$el.html());
// this.$el.html(htmlString);
$('#content').html(htmlString);
console.log(this.$el.html());
}
});
正如您所看到的,我已经尝试将this.$el.html(htmlString);
调用替换为$('#content').html(htmlString);
,希望这至少会提供一个临时解决方案,但在DOM中仍然没有变化。
有谁知道发生了什么事?我在这里猜测:(
修改
所以我的DOM结构在初始化页面时看起来像这样:
<body>
<div id="wrapper">
<div id="content" class="player">
</div>
</div>
</body>
我刚刚检查了我的DOM并且#content
div完全消失了,我不知道为什么......当我将AppView的元素设置为$('#wrapper')
时,一切正常= \任何人都可以解释为什么是
另外,感谢迄今为止的评论:D
答案 0 :(得分:4)
从PastePin中的代码创建JSFiddle后,我发现了它!
问题出在您的RoomPickerView中。您将el
设置为&#34; div&#34;当你打算设置tagName
:
var RoomPickerView = Backbone.View.extend({
el: 'div'....
应该是
var RoomPickerView = Backbone.View.extend({
tagName: 'div'...
另外,有关使AppView.render()
更清洁的提示,请执行以下操作:
render: function() {
this.$el.html( this.view().render().el );
},
view: function(){
return this.state == 'pickRoom' ? this.roomPickerView : this.characterPickerView
}