0

我正在使用带有 Mustache 的主干.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);
        }
    });
}
});

PS 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 中呈现，但它们三个都在同一个 div 中。即使在渲染之前记录 this.$el 表明正确的 div 确实在对象中。

我认为这可能与 Ajax 有关，因此async:false在 Ajax 调用中进行了尝试，但同样的事情发生了。

有什么想法吗？

4

1 回答 1

1

我猜想，handleResponse并且render将要做的事情this.$el。一个问题是this.$el每次调用都会发生变化，drawDropDownList因此所有三个drawDropDownList调用最终都会使用相同的this.$el.

另一个问题是您永远不应该分配给$el或el直接分配，您应该只使用setElement来更改视图的元素，setElement确保$el并el同意并且它将重新绑定事件。

我真的不明白为什么MiscFunctionsView是一个视图，它看起来更像是一堆实用方法，一个视图。视图通常是附加到单个 DOM 元素的用户界面的一块。内部每个 s的视图#searchForm或一个视图会更有意义。那么你将只是一个实用的 mixin 方法，如下所示：<div>#searchFormdrawDropDownList

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
        }
    });
}
于 2013-08-19T18:01:44.827 回答