在主干 afterRender() 内访问时，Dom 元素未更新答案

【问题标题】：Dom elements not updated when accessed inside backbone afterRender()在主干 afterRender() 内访问时，Dom 元素未更新
【发布时间】：2016-04-12 11:22:36
【问题描述】：

这是我的 render() 函数：

initialize: function() {
    this.selectDivView = new SelectView({
        url: '/ir/secure/api/v40/myvariants/myVariantDBs',
        method: 'POST',
        template: myVariantDBFilterTemplate
     });
},

render: function() {
    this.$el.html(template()); //has div for "select drop down"
    this.selectDivView.setElement(this.$(this._selectDivId)).render();
    this.afterRender();
},

afterRender: function() {
    this.$(this._selectEl).val();
    //Expected to get some value but the select control is not yet rendered in dom
}

我尝试按照此链接中提到的方式进行操作 Backbone.js event after view.render() is finished 但无法访问 DOM 元素。

这是我的 Select 控件的把手模板 selectDiv.html

{{#each filters}}
<option value="{{id}}">{{name}}</option>
{{/each}}

我猜我在 afterRender() 中的时候 DOM 没有刷新。在这里可以做什么？

我的 SelectDivView 渲染函数

render: function(selectedValue) {
    this.selectedValue = selectedValue;
        $.ajax({
            url: this.url,
            method: this.method,
            async: false,  // THIS IS THE DECIDING PROPERTY.
            success: function(data) {
                    that.filters = data;
                    that._doRender.call(that);
            }
        });
}

【问题讨论】：

也许你在 selectDivView 的 render 方法中做一些异步操作......？除非我们看到代码，否则我们无法确定。请分享minimal reproducible example
@t-j 非常感谢。您的陈述“也许您正在 selectDivView 的渲染方法中执行异步操作”给了我答案。

标签： jquery backbone.js render backbone-views backbone-events

【解决方案1】：

你手动绑定 afterRender 吗？

initialize: function(options) { 
  _.bindAll(this, 'beforeRender', 'render', 'afterRender'); 
  var _this = this; 
  this.render = _.wrap(this.render, function(render) { 
    _this.beforeRender(); 
    render(); 
    _this.afterRender(); 
  });
},

render: function() {
    this.$el.html(template()); //has div for "select drop down"
    this.selectDivView.setElement(this.$(this._selectDivId)).render();
    return this;
},

afterRender: function() {
    this.$(this._selectEl).val();
}

【讨论】：

这正是我所做的。但是在渲染之后，选择控件尚未使用选项渲染。
我明白了。当你停在 afterRender 里面时，你能找到使用控制台的选择控件吗？还是根本没有渲染？
我可以在控制台中看到选择控件。但它不是用选项呈现的。但是，一旦我退出浏览器上的 afterRender()，我就可以正确地看到带有所有值的选择控件。
试过了。它不工作。我想这也是你之前建议的。

【解决方案2】：

添加 ajax 属性

async: false

在 selectDivView 的渲染函数中解决了这个问题。

select div 的渲染函数如下所示

render: function(selectedValue) {
    this.selectedValue = selectedValue;
        $.ajax({
            url: this.url,
            method: this.method,
            async: false,  // THIS IS THE DECIDING PROPERTY.
            success: function(data) {
                    that.filters = data;
                    that._doRender.call(that);
            }
        });
}

【讨论】：

嗨，不推荐使用同步 ajax 请求...如果您使用的是最新版本的浏览器（如 chrome），您应该会在开发人员工具中看到警告...最好返回 xhr 对象并访问请求成功后的值