BackboneJS $ el.html()似乎没有任何效果

时间:2014-02-26 18:10:04

标签: jquery dom backbone.js

我在更新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

1 个答案:

答案 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
}