问题

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返回以下内容：

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

上提供完整路由器

在模板

问题

我拥有什么

问题

1 个答案: