Javascript Backbone.js–对li元素的更改不会立即显示

我的模板中只有一堆div和一个列表，由多个li元素组成。用例很简单，li元素是一个下拉列表，仅在单击按钮时显示。当下拉列表可见且有人开始键入时，应选择匹配的li元素，或者应有视觉指示

我的方法是，在键控事件中，我查找键入的单词，这在li元素中非常容易。我发现了一些元素，我已经证实了。现在，当我尝试使用这些元素时，当下拉列表打开时，似乎什么都没有发生，我正在尝试。切换这些元素。现在，当我再次点击第一个显示下拉列表的按钮时，这个点击隐藏了下拉列表，然后再次点击相同的按钮显示下拉列表，瞧！值已按应有的方式更改–匹配元素已隐藏/显示

这把我难住了。对于公司政策，我无法将代码上传到这里，但如果其他人以前遇到过这个问题并能帮助我解决，我将非常感激

编辑： 代码：用于更改按键下拉列表的功能，此功能正在正确启动：

        filterOptionsForKeypress: function (event) {
        var typedString = this.$('input.filter-button-text').val(),
            searchToken = _.trim(typedString.toLowerCase().replace(/ /g, '_')),
            matchingLi = this.$("li[data-field^='" + searchToken + "']", this.$el), // makes no difference with or without the context, this.$el
            that = this;
        if (matchingLi && matchingLi.length) {
            this.$(matchingLi[0]).html('kaka'); // this change shows only if the dropdown is hidden + shown again
            console.log('trying to move focus', this.$(matchingLi[0]).attr('data-field'));
        }
        // this.$el.append('Some text'); -- this works, I see the changes as they happen
    }

模板如下所示：

            <div class="filter-button filter-option {{if !model.include}}button-red{{else}}button-green{{/if}} toggle-dropdown" data-dropdown-class="{{if !model.include}}button-red{{else}}button-green{{/if}}">
            <div class="filter-button-text">${model.option}</div>
            <div class="filter-drop"></div>
            <div class="dropdown filter-dropdown">
                <ul>
                    {{each model.config.options}}
                        <li data-field="${$value.op}" data-include='${$value.include}'>${$value.name}</li>
                    {{/each}}
                </ul>
            </div>
        </div>

编辑2： 当下拉列表打开时，html的外观如下： 开放式： 关闭：

---

因此，基本上，除了在封闭的div中添加一些样式和一个“open”类之外，我看不出有任何区别。

问题在于我们使用了一个用于下拉菜单的插件。所以基本上，我们在屏幕上看到的并不是我们用这个选择的结果。解决方案是什么？用一个：visible filter查看全局，瞧，问题解决了。

您是如何将视图放入DOM的？你好像在什么地方失去了背景。。像视图一样，构建没有连接到DOM，可能是渲染不正确。单击下拉列表显示/隐藏列表时，代码是什么样子的？我不确定。您正在直接操作DOM。我真的不知道为什么它不会像你那样更新。html'kaka'这太奇怪了。@CoryDanielson我已经添加了截图，如果你能在渲染方法中向我们展示代码，那会有所帮助。我怀疑您正在编辑视图的内容，但如果有意义的话，您的视图不是屏幕上的内容。@Tom我看不到在隐藏/显示下拉列表时触发渲染。此外，当从下拉列表中单击li元素时，将触发selectOption方法，并将所选li字段的值记录在其中，因为它已更改，将显示更改的值，而不是旧值。然后隐藏并再次显示下拉列表显示更新的值。这很好，解决了您的问题。然而，这条路有点危险。现在基本上得到的是一些存储在全局范围内的东西，即视图调用的DOM。如果您的应用程序的大小要比现在大得多，我强烈建议您尽量避免进行全局DOM查找。@Tom我完全同意。然而，我们面临着与许多初创企业相同的问题：我们现在的盘中有太多的东西，我们可能对最佳实践不够谨慎。作为一名开发人员，我个人赞成从一开始就把事情做好。但在一个团队中，我们都必须调整和适应。