Javascript 在模板中显示延迟数据 问题

我用它来做路由和模板

我正在努力解决的是在模板中使用数据

我的模板引擎是

我所拥有的 我有一个获取用户数据的函数（目前我正试图显示一条消息）：

在我的路由器中，我得到如下数据：

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>

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

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

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

地址簿
消息：{response.msg}

问题: 它当前仅显示模板，无

msg

。如果我将

{response.msg}

更改为just

{response}

，它将显示

[Object Object]

，这是响应对象，因此它正在发送内容

---

如何访问

msg

？

我通过多次更换路由器来修复它。我有一个

loadPage（）

函数，看起来像这样：

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

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

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();
},

这是在我的

router（）

函数末尾调用的（在找到模板之后）

首先，我改变了我的实际

route（）

函数，如下所示：

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

现在我可以通过如下方式设置我的路线来传递回调：

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

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

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();
},

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

 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);
    }
},

在本例中，我的回调如下所示：

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

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

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

在

路由

功能后添加了额外步骤

编辑2

---

完整路由器可在

上使用，相关代码将仅提供“无消息”或“未找到通讯簿”。“此用户拥有通讯簿”的消息来自何处？@Roamer-1888感谢您的评论。我已经更新了这个问题。发布问题时，我正在测试其他方法，因此这就是消息的来源。模板是如何调用的？我再也看不到调用

adrloaddressbooks（）

的位置了。在从

jsRouter.route（）

@Roamer-1888调用之前，感谢您指出这一点。更新我的答案。啊，好的。这将是很好的看到所有的代码。有些事情还不清楚。例如，

router（）？它不是传递的，也不是本地的，所以它必须在外部作用域中，但不清楚外部作用域是什么或变量是如何设置的。@Roamer-1888将该文件添加到pastebin。看一看。记住，它还在开发中。就像今天一样，我已经改变了很多。这是周五结束时的文件。显然，如果你能提出改进建议，我们非常欢迎你。我要改变的主要事情是整体包装
jsRouter
作为应用程序的一部分或jQuery插件可能会更好。这两种方法都允许您保持某些函数和变量的私有性，并且只公开公共方法。一个普通的物体并不能真正提供这种可能性。另外，在对代码进行了一段时间的研究后，我发现
.loadData（）
方法是不必要的-重写
.router（）
后，它就消失了。