Question

拜托，您能解释一下为什么这段代码不能像我想象的那样起作用吗？

我有一个带有两个列表容器的网页，一个用于打开的门票，另一个用于关闭的门票。

我使用带有简单表格模板的把手来注入列表容器。

我已经定义了一个Ticket对象，并且在fetchList中我进行了ajax调用以检索故障单。这是代码：

var Ticket = {
init : function(config){
    this.config = config;
    this.setupTemplates();
},

setupTemplates: function(){
    this.config.listTemplate = Handlebars.compile( this.config.listTemplate );
},

fetchList: function(){
    self = Ticket;

    $.ajax({
        type : self.config.ajaxType,
        dataType : 'json', 
        url: self.config.ajaxUrl,
        data: self.config.ajaxData
    }).done(function(data, status, obj) {

        self.config.listContainer.empty();

        if ( data[0] ) {
            self.config.listContainer.html( self.config.listTemplate(data) );
        } else {
            self.config.listContainer.html('<p class="lead">No ticket was found.</p>');
        }
    }).fail(function(data) {
            self.config.listContainer.html('<p class="lead text-danger">Sorry! Something went wrong!!</p>');
    });
}

}

现在，我发布一步一步的代码来显示我的问题。如果我只关注列表容器之一，则页面中的代码可以正常工作，例如：

Ticket.init({
    ajaxUrl : ajax_url,
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'1'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_open'),
});

Ticket.fetchList();

此代码运行正常，它填充了正确的列表容器，其中包含已打开状态的票证表。哇！

现在，我想对已关闭的故障单做同样的事情。所以我尝试添加这个：

Ticket.init({
    ajaxUrl : ajax_url,
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'0'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_close'),
});

Ticket.fetchList();

所以代码变成了：

Ticket.init({
    ajaxUrl : ajax_url,
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'1'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_open'),
});

Ticket.fetchList();

Ticket.init({
    ajaxUrl : ajax_url,
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'0'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_close'),
});

Ticket.fetchList();

正如您所看到的，唯一改变的是ajax请求（status = 0）和列表容器（.tickets_close）的数据。

现在，.tickets_open为空白，而.ticket_close返回正确，并且票证已关闭。

我认为第二个ajax调用在第一个之前返回，并且在第一个fetchList完成之前我已经更改了容器。

所以我试图声明两个变量，如：

var ticketOpened = Ticket;
var ticketClosed = Ticket;

ticketOpened.init({
    ajaxUrl : "<?=base_url('ajax/tickets/get_tickets')?>",
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'1'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_open'),
});

ticketOpened.fetchList();

ticketClosed.init({
    ajaxUrl : "<?=base_url('ajax/tickets/get_tickets')?>",
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'0'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_close'),
});

ticketClosed.fetchList();

但......没有改变。只有关闭的票证是正确的，而.ticket_open是空白的。为什么？

我还在学习javascript代码概念，但我无法理解。

感谢您的帮助。

带有ajax调用的相同javascript对象 - 我需要它两次

0 个答案: