Handlebar 中的 Javascript 函数调用

Question

我正在尝试使用 JavaScript 函数调用在 Handlebars 模板中创建 d3 饼图。

这是我的脚本:-

<style>
#name {
    color: black;
    float: left;
    width: 34%;
}

#group {
    color: red;
    float: left;
    width: 33%;
}

#wave {
    color: green;
    float: left;
    width: 33%
}



#chart {
    width: 350px;
    padding: 10px;
}

#footer {
    color: blue;
    clear: both;
    text-align: center;
    padding: 5px;
}


#header {
    background-color: white;
    color: white;
    text-align: center;
    padding: 10px;
}
</style>
<div id="test"></div>

<script id="template" type="text/x-handlebars-template"> 
{{#each this}}

<div id="header">
        <div id="wave" style="color: #000FFF; font-size: 28px">Wave</div>
        <div id="name" style="color: #000000; font-size: 28px">{{name}}</div>
        <div id="group" style="color: #000000; font-size: 28px">{{groupName}}</div>
 </div>


<div id="table">
    <table>
    <tr>
        <td><div id="chart">{{recommendedFoods 25 25 25 25}}</div></td>
    </tr>
</table>
</div>
<div id="footer">
    Questions? Contact us 
</div>
{{/each}}
</script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script>

 $(document).ready(function (){
     Handlebars.registerHelper("recommendedFoods", function(a,b,c,d) {
            var w = 200;
            var h = 200;
            var r = h / 2;
            d3.select("#chart").append("text").attr("text-anchor", "middle").style(
                    "font-size", "28px").style("text-decoration", "bold").text(
                    "Recommended");
            var color = d3.scale.ordinal().range(
                    [ "#ffe5ff", "#ffeee5", "#d0743c", "#ff8c00" ]);
            //GPVF
            var data = [ {
                "label" : "8",
                "value" : a
            }, {
                "label" : "3",
                "value" : b
            }, {
                "label" : "6",
                "value" : c
            }, {
                "label" : "2",
                "value" : d
            } ];

            var vis = d3.select('#chart').append("svg:svg").data([ data ]).attr(
                    "width", w).attr("height", h).append("svg:g").attr("transform",
                    "translate(" + r + "," + r + ")");
            var pie = d3.layout.pie().value(function(d) {
                return d.value;
            });

            // declare an arc generator function
            var arc = d3.svg.arc().outerRadius(r);

            // select paths, use arc generator to draw
            var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g")
                    .attr("class", "slice");

            arcs.append("svg:path").attr("fill", function(d, i) {
                return color(i);
                // return color(d.data.value)
            }).attr("d", function(d) {
                console.log(arc(d));
                return arc(d);
            }).attr('stroke', '#fff') // <-- THIS
            .attr('stroke-width', '3');

            // add the text
            arcs.append("svg:text").attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";
            }).attr("text-anchor", "middle").text(function(d, i) {
                return data[i].label;
            });
        //}
        return this;
        });

     var source = $("#template").html();
     var template = Handlebars.compile(source);
    var string = [{"groupName":"Default Group","name":"Dummy"},{"groupName":"New","name":"Becker"}];
    var ht = template(string);
    $("#test").html(ht);


});

</script>

如果我在脚本中调用RecommendedFoods函数而不在模板中使用它，那么它就会正确执行。但是，我试图在函数 recommendedFood 中返回此，但我没有看到输出上显示任何内容。谁能帮我解决这个问题吗？函数应该返回什么，以便可以使用 handle 显示它

Answer 1

这是因为当您调用 Handlebars 助手时，DOM 中还没有 #chart 元素。

所以你需要:

1. 将 #chart 更改为 .chart 类，因为您将拥有多个元素
2. 在 Handlebars 执行后构建图表。
3. 存储图表的值，例如在同一个 strings 对象中，您已经拥有一些相关信息。

查看演示 - Fiddle .

代码:

$(document).ready(function() {

    var source = $("#template").html();
    var template = Handlebars.compile(source);
    var string = [{
        "groupName": "Default Group",
        "name": "Dummy",
        "values": [25, 25, 25, 25]
    }, {
        "groupName": "New",
        "name": "Becker",
        "values": [10, 5, 25, 25]
    }];
    var ht = template(string);
    $("#test").html(ht);

    $('.chart').each(function(index, el) {

        var w = 200;
        var h = 200;
        var r = h / 2;
        d3.select(el).append("text").attr("text-anchor", "middle").style(
            "font-size", "28px").style("text-decoration", "bold").text(
            "Recommended");
        var color = d3.scale.ordinal().range(
            ["#ffe5ff", "#ffeee5", "#d0743c", "#ff8c00"]);
        //GPVF
        var data = [{
            "label": "8",
            "value": string[index].values[0]
        }, {
            "label": "3",
            "value": string[index].values[1]
        }, {
            "label": "6",
            "value": string[index].values[2]
        }, {
            "label": "2",
            "value": string[index].values[3]
        }];

        var vis = d3.select(el).append("svg:svg").data([data]).attr(
            "width", w).attr("height", h).append("svg:g").attr("transform",
            "translate(" + r + "," + r + ")");
        var pie = d3.layout.pie().value(function(d) {
            return d.value;
        });

        // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);

        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");

        arcs.append("svg:path").attr({
            "fill": function(d, i) {
                return color(i);
            },
            "d": function(d) {
                console.log(arc(d));
                return arc(d);
            },
            'stroke': '#fff',
            'stroke-width': '3'
        });

        // add the text
        arcs.append("svg:text").attr({
            "transform": function(d) {
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";
            },
            "text-anchor": "middle"
        }).text(function(d, i) {
            return data[i].label;
        });

    });

})