Question

我正在使用带有Mustache的backbone.js作为模板引擎，我的一个主干视图执行其他功能，其中一个是使用从数据库获取的项目呈现下拉列表。这些项是使用Ajax获取的，该函数有两个参数，数据库表名和将在其上呈现列表的div id。

骨干观点：

MiscFunctionsView = GenericView.extend({
template: "dropdownList-template.html",
initialize:function(){
    this.constructor.__super__.initialize.call(this);
},
drawDropDownList: function(tableName,divId){
    this.$el=$("#"+divId);
    console.log(this.$el);
    var that = this;
    $.ajax({
        url: this.basePath + "misc.php",
        type:"post",
        data:{
            ac:"ddl",
            table_name: tableName
        },
        success:function(res){
            that.handleResponse(res);
        }
    });
}
});

P.S。 handelResponse（）和render（）函数在GenericModel中定义，试图最小化问题中的代码量，如果需要的话告诉我。

html页面：

<form id="searchForm">

    <div id="occupation">

    </div>
    <div id="p-type">

    </div>
    <div id="a-type">

    </div>
</form>
<script type="text/javascript">
    $(function(){
        var misc = new MiscFunctionsView();
        misc.drawDropDownList("occupation","occupation");
        misc.drawDropDownList("person_type","p-type");
        misc.drawDropDownList("account_type","a-type");
    });
</script>

加载后的页面：

<form id="searchForm">

    <div id="ddl">

    </div>
    <div id="search-results">
        <select name="account_type" id="account_type-ddl">
            <option value="1">Developer</option>
            <option value="2">Free Individual</option>
            <option value="3">Premium individual</option>
        </select>
        <select name="occupation" id="occupation-ddl">
            <option value="1">Actor</option>
            <option value="2">Director</option>
           <option value="3">Producer</option>
        </select>
        <select name="person_type" id="person_type-ddl">
            <option value="1">Established</option>
            <option value="2">Upcoming</option>
            <option value="3">Corporate</option>
        </select>
    </div>
    <div id="results">

    </div>
</form>

您可以看到所有下拉列表都在同一个div中呈现，这是任意的，这意味着如果我重新加载页面，它们可以在不同的div中呈现，但是它们中的所有三个都在同一个。即使在渲染之前记录这个。$ el，也表明正确的div在对象中。

我认为它可能与Ajax有关，所以在Ajax调用中尝试async:false但是同样的事情发生了。

有什么想法吗？

Answer 1

我猜handleResponse和render将会对this.$el做些什么。一个问题是每次拨打this.$el时drawDropDownList都会发生变化，因此所有三个drawDropDownList来电都会使用相同的this.$el。

另一个问题是，您不应该直接分配到$el或el，只应使用setElement更改视图的元素，setElement将确保{ {1}}和$el同意，它会重新启动事件。

我真的不明白为什么el完全是一个视图，它看起来更像一堆实用工具方法。视图通常是附加到单个DOM元素的用户界面的一部分。对于MiscFunctionsView中的#searchForm内的每个<div>，#searchForm或者一个视图的视图会更有意义。然后你的drawDropDownList只是一个实用程序mixin方法，如下所示：

drawDropDownList: function(tableName, divId) {
    var $div = $('#' + divId);
    $.ajax({
        url: this.basePath + 'misc.php',
        type: 'post',
        data: {
            ac: 'ddl',
            table_name: tableName
        },
        success:function(res) {
            // Render the `<select>`s into `$div` here and leave `that.$el` alone
        }
    });
}

与backbone.js的Mustache.js无法在正确的div中呈现

1 个答案: