Laravel to handlebars

I’ve been working on a site in laravel and now I want to use just handlebars.js.

So far its not going so well. Here’s the code I want to transform to handlebars:

<div class="text-info">
    <h2 id="result_header"></h2>
    <ul id="result_list" class="list-unstyled"></ul>
    <script>
        $(document).ready(function(){
            // get the form submit event
            $('form').submit(function(event){
                // stop the form from submitting

                event.preventDefault();

                // the form object
                var form = $(this);

                // perform ajax post request
                $.post(

                        form.attr('action'), // this will go to form url
                        form.serialize(), // grab the form data
                        function(data) { // do something with the response

                            // add title of recipes in a list
                            $('#result_list').empty(); // empty the list before adding info on it
                            $('#result_header').append($('<h2></h2>').text('Result:'));
                            $.each(data.recipes, function(key, value) {
                                $('#result_list').append($('<li></li>').append($('<a href=""></a>').text(value.title)));
                                $('a').attr('href', 'getRecipe/'+ value.recipe_id); // add href with id to link
                            });



                        }
                );

            });
        });

And here is the code I have so for with handlebars.js

<script>
    $(document).ready(function(){
        // get the form submit event
        $('form').submit(function(event){
            // stop the form from submitting

            event.preventDefault();

            // the form object
            var form = $(this);

            // perform ajax post request
            $.post(

                form.attr('action'), // this will go to form url
                form.serialize(), // grab the form data
                function(data) { // do something with the response

                    // add title of recipes in a list
                    $('#result_list').empty(); // empty the list before adding info on it
                    $('#result_header').append($('<h2></h2>').text('Result:'));

                    $.each(data.recipes, function(key, value) {
                        {
                            recipe: value.title
                        }

                        var source   = $("#api_template").html();
                        var template = Handlebars.compile(source);
                        $("#result_list").html(template(data));




                    });



                }
            );

        });
    });
</script>

<script id="api_template" type="text/x-handlebars-template">
    <li>{{recipe}}</li>
</script>
</head>
<body> 
<div class="search-form">
<form action="searchRecipe" method="post">
    <input type="text" placeholder="ingredients" name="search">
    <input type="submit" value="Search Recipe" >
</form>
</div>

<div id="result_list">

</div>


</body>


Source: laravel

Leave a Reply