BackboneJS $ el.html（）似乎没有任何效果

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

初始化我的AppView时，按预期工作。 render()函数在#content div内呈现RoomPickerView的元素，因为状态变量初始化为'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()); 
} 
});

正如你可以看到我已经尝试过用$('#content').html(htmlString);更换this.$el.html(htmlString);呼吁，希望至少将提供一个临时的解决方案，但仍然没有改变在DOM中可以看出。

有没有人有任何想法是怎么回事？我走了猜测这里:(

编辑：

所以我的DOM结构看起来像这样初始化页面时：

<body> 
    <div id="wrapper"> 
     <div id="content" class="player"> 

     </div> 
    </div> 
</body>

我只是检查我的DOM和#content DIV消失完全和我不知道为什么...当我将我的AppView的元素设置为$('#wrapper')所有工作正常= \任何人都可以解释这是为什么？

此外，感谢您的公司到目前为止：D

来源

2014-02-26 lunanoko

元素是否可用在DOM和ID是唯一的？你能检查它：'console.log（$（'[id = content]'）。length）;' –

你是否检查过htmlString包含你认为应该重绘时？ –

@KyleNeedham：是的，htmlString完全包含我期望的内容。另外，请参阅我的编辑:)感谢您的评论:) – lunanoko

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

问题出在您的RoomPickerView。您可以设置el以“格”时，你的意思是设置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 
}

来源

2014-02-26 18:49:24

太棒了！非常感谢你和你的建议:) – lunanoko

BackboneJS $ el.html（）似乎没有任何效果

回答

相关问题