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

【问题标题】：BackboneJS $el.html() doesn't seem to have any effectBackboneJS $el.html() 似乎没有任何效果
【发布时间】：2014-02-26 18:10:03
【问题描述】：

我在更新 AppView 的 $el HTML 内容时遇到了一些问题。

初始化我的 AppView 时，一切正常。 render() 函数将 RoomPickerView 的元素呈现在 #content div 中，这是意料之中的，因为 state 变量是用 'pickRoom' 初始化的值。

从handleCheckRoomResult() 函数中再次调用render() 时会出现问题。预期的行为是 #content 的 html 被 PlayerCharacterView 的元素替换，但没有任何变化，我仍然看到以前的 HTML 内容（房间选择器的）。

如果我在对 render() 的调用结束时记录 AppView 的 $el.html()，它会显示正确的 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') 时一切正常 =\ 谁能解释这是为什么？

另外，感谢到目前为止的 cmets :D

【问题讨论】：

DOM 中的元素是否可用且 ID 是否唯一？您能否使用：console.log($('[id=content]').length); 进行检查
您是否检查过 htmlString 是否包含您认为重新渲染时应该包含的内容？
@KyleNeedham：是的，htmlString 包含的正是我所期望的。另外，请参阅我的编辑 :) 感谢您的评论 :)
你能设置一个 JSFiddle 吗？
jsfiddle.net/DaA5L

标签： jquery dom backbone.js

【解决方案1】：

从您的 PastePin 中的代码创建 JSFiddle 后，我想通了！

问题出在您的 RoomPickerView 中。当您打算设置tagName 时，您将el 设置为“div”：

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
}

【讨论】：

太棒了！非常感谢您的建议和建议:)