在模板中显示延迟数据

Question

问题

我正在使用 this 20 line router 进行路由和模板化。

我遇到的问题是在模板中使用数据。

我有什么

我有一个获取用户数据的函数（目前我只是想显示一条消息）：

adrLoadAddressBooks:function() {
    var deferred = new $.Deferred();
    var return_response = {};
    data = {
        country_code:config.country_code,
        language_code:config.language_code,
        source:config.source,
        usr_id:app.getCookie('usr_id'),
        login_token:app.getCookie('login_token')
    };
    app.api('adr/list',data,function(data) {
        var response = JSON.parse(data);
        return_response.msg = 'This user has address books.';
        if(!response.result) {
            return_response.msg = 'No address books found.'
        }
        deferred.resolve(return_response);
    },'post');
    return deferred.promise();
},

在我的路由器中，我得到这样的数据：

jsRouter.route('/adr','adr/index',function() {
    console.log('In route function');
    this.response = events.adrLoadAddressBooks().done(function(response) {
        console.log(response);
        return response;
    });
});

console.log returns以下：

Object {msg: "This user has address books."} // correct

在我的模板文件中有以下内容：

<h4>Address Books</h4>
Message: {response.msg}
<a href="#/adr/create">Create Address Book</a>

问题

目前只显示模板，没有msg。如果我将 {response.msg} 更改为 {response}，它会显示 [Object object]，这是响应对象，因此它正在发送内容。

如何访问 msg？

Answer 1

我通过大量更换路由器来修复它。我有一个看起来像这样的 loadPage() 函数：

loadPage:function(page,element,bindData) {
    $.get(page,function(data) {
        element.html(nano(data, bindData));
        app.setPageListeners();
    });
},

这是在我的 router() 函数结束时调用的（在找到模板之后）。

router:function() {
    app.resetResponse();
    jsRouter.el = jsRouter.el || $('#view');
    var url = $.urlHash() || '/';

    if(typeof route == 'undefined' || typeof route == null) {
        route = jsRouter.routes['404'];
    }
    auth.isLoggedIn();

    if(jsRouter.el && route.controller) {
        jsRouter.loadPage(config.templates + route.template + '.html',jsRouter.el,new route.controller);
    }
},

首先，我所做的是改变我的实际 route() 函数，如下所示：

route:function(path,template,callback) {
    jsRouter.routes[path] = {template: template, callback: callback };
},

所以现在我可以像这样设置我的路由来传递回调：

jsRouter.route('/adr','adr/index',events.adrLoadAddressBooks);

然后我将路由器的末尾更改为：

 if(jsRouter.el) {
    if(route.callback) {
        jsRouter.loadData(config.templates + route.template + '.html',jsRouter.el,route.callback);
    } else {
        jsRouter.loadPage(config.templates + route.template + '.html',jsRouter.el,"");
    }
}

然后创建了一个 loadData 函数，它在继续之前等待延迟对象，如下所示：

loadData:function(page,element,callback) {
    if(typeof callback !== 'undefined') {
        if (typeof callback === "function") {
            callback().done(function(data) {
                jsRouter.loadPage(page,element,data);
            });
        } else {
            alert("Could not call " + endpoint);
        }
    } else {
        jsRouter.loadPage(page,element,this);
    }
},

在这种情况下，我的回调如下所示：

adrLoadAddressBooks:function() {
    var deferred = new $.Deferred();
    //do stuff

    app.api('adr/list',data,function(data) {
        var response = JSON.parse(data);
        return_response.msg = 'Below is a list of all your address books.';

        if(!response.result) {
            return_response.msg = 'This user has no address books.';
            deferred.resolve(return_response);
        }

        //build response

        deferred.resolve(return_response);
    },'post');

    return deferred.promise();
},

而且效果很好。 :) 显然，如果有我可以改进的地方，请添加评论

编辑 1

在 route 函数之后添加了额外的步骤。

编辑 2

Pastebin

上可用的完整路由器

在模板中显示延迟数据

Display deferred data in template

javascript

templates

routes

deferred

问题

我有什么

问题