个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 07:13:44 25 4
gpt4 key购买 nike

我在更新 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());
}
});

如您所见，我已经尝试将 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

最佳答案

创建JSFiddle后从你的 PastePin 中的代码中，我明白了!

问题出在您的 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
}

关于jquery - BackboneJS $el.html() 似乎没有任何效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22049690/

25 4 0
文章推荐： php - 使用 jQuery 发送表单并检查是否已提交
文章推荐： jquery - 如何改变当前ul所有li的class？
文章推荐： 删除本地重复值
文章推荐： jQuery sibling 不工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com