Question

我有一个json文件，它有像这样的json数据：

{
    "username":"lgangula",
    "message":""
}

data.json文件中的

我正在使用jquery ajax方法获取文件，并使用Handlebars.js附加数据;这是功能：

var JsonHandler = function(url) {
        return $.getJSON(url)
};

(function ($) {

    var manupulate = function(data){
        $.each(data, function(key,value){
            if(key === "username"){
                            console.log(value) // i am getting the name
                var x = Handlebars.compile($("#header-template").html());
                console.log(x(value));//i am getting the elements, without the value..!?
            }
        })
    }


    var path = "js/data.json";
    new JsonHandler(path).done(function(data){
        manupulate(data);
    })

})(jQuery);

我没有得到我的html输出值。这是我使用的模板：

<script id="header-template" type="text/x-handlebars-template">
        <div class="loginInfo"> <a href="#">{{username}}</a> | <a href="#">Logout</a> </div>
    </script>

这里出了什么问题..任何人都可以帮助我吗？

即使我再次尝试过这种方式：

(function ($) {

    var x = {"username":"lgangula"}


    var manupulate = function(data){
        $.each(x, function(key,value){
            if(key === "username"){
                console.log(value);//consoling the name
                var x = Handlebars.compile($("#header-template").html());
                console.log(x(value)); //no result here.
                            console.log(x({"username":"lgangula"})); //works fine
            }
        })
    }

    manupulate();

})(jQuery);

仍然无法正常工作..

如果我像这样传递对象，它就可以工作..

console.log(x({"username":"lgangula"})); //works fine

Answer 1

你没有渲染模板试试这个，

var template = Handlebars.compile($("#header-template").html());
 var html =  template(x)
 console.log(html)

无法使用带有Handlebars.js模板的Jquery从Json获取html数据

1 个答案: