Call Handle Bar Helper Function From Another Helper Function

-




Hi all, This is my new post after long time :P
                               I am Learning Handlebar now :)

I am not going to explain you the basics of handlebar and make my post as bored one .Instead let me explain the feature which most of us don't know.
If you are new to handlebar here is the link you can refer it and learn basics

                                http://handlebarsjs.com/


From the above link you will get to know there is  a feature called helper function in handlebars .
Here i am going to explain how to call a helper function from another helper function.
some times  you may get into a situation where you want to perform some operation as the result of another in that situation you can use this logic.

 Template     

This is my template ,

{{#checkAndFormat "India"}}{{/checkAndFormat}}             

Helper 1:

                     
    Handlebars.registerHelper('checkAndFormat', function (value, options) {
    var source = '{{checkMyName x y}}';
    var context = {
        x: value,
        y: options
    };
    var test = Handlebars.compile(source)(context);
    var html=value;
    html=html+" is "+test;
    return new Handlebars.SafeString(html);
 });

checkAndFormat is my first helper function which i am going to call with the param in html content.
look at the code which is highlighted in blue that is the actual syntax .
checkMyName is the another helper function which i am going to call from first one .
I am passing the param from first helper to second one.This can be specified as 

  var source = '{{checkMyName x y}}';

x,y is the params ,that can be defined like this and assigned to context

        var context = {   x: value,     y: option  }; 

This is the code which calls our helper , it is like compiling our  handlebar template here i am adding context(params) also.
var test = Handlebars.compile(source)(context); 

 compiling  template is done on document ready so as soon as the template is compiled first helper     function will get called and "india" will be passed to helper 2

$(document).ready(function () {
    var source = $('#tmp').html();
    var template = Handlebars.compile(source);
    var html = template();
    $('#main').html(html);
});

  Helper 2:

Here i am checking that the param  value is equal to "India" if yes i am returning a string as"my country" else "not my country" will be returned 
Based on this result first helper will return html that will be getting displayed.


Handlebars.registerHelper('checkMyName', function (value, options) {
    if (value == "India") {
        return new Handlebars.SafeString("my country");
    } else {
        return new Handlebars.SafeString("not my country");
    }

});

This is my entire code ,



<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>

<body>
    <div id="main">
    </div>
    <script id="tmp" type="text/x-handlebars-template">
        {{#checkAndFormat "India"}}{{/checkAndFormat}}
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = $('#tmp').html();
            var template = Handlebars.compile(source);
            var html = template();
            $('#main').html(html);
        });
        Handlebars.registerHelper('checkAndFormat', function (value, options) {
            var source = '{{checkMyName x y}}';
            var context = {
                x: value,
                y: options
            };
            var test = Handlebars.compile(source)(context);
            var html = value;
            html = html + " is " + test;
            return new Handlebars.SafeString(html);
        });
        Handlebars.registerHelper('checkMyName', function (value, options) {
            if (value == "India") {
                return new Handlebars.SafeString("my country");
            } else {
                return new Handlebars.SafeString("not my country");
            }

        });
    </script>
</body>
</html>

Hope you also learnt some thing new today :)





Comments

Post a Comment

Popular posts from this blog

Get rid of boring for loop and try using "range" and "rangeClosed"

-
Most of the Java developer already started using Java 15 but here is the feature in java 8  which  i want  to introduce to the people who doesn't  know about it or may be not using it. Lets see about two static methods  "range()" and "rangeClosed()". Usage  These two methods are available in IntStream and LongStream. IntStream -  IntStream class is an specialization of Stream interface for int primitive. It represents an stream of primitive int-valued elements supporting sequential and parallel aggregate operations.  IntStream is part of the java. util. stream package and implements AutoCloseable and BaseStream interfaces. Syntax range It returns the sequential ordered IntStream .It includes only the startInclusive value . static  IntStream  range( int  startInclusive ,  int  endInclusive) rangeClosed It returns the sequential ordered IntStream .It includes startInclusive and endInclusive values . static IntStream rangeCl...
Read more

HOW TO USE NOTE PAD AS YOUR PERSONAL DAIRY!!!!!

-
Image
                                                                             HOW TO USE  NOTE PAD AS YOUR PERSONAL DAIRY!!!!! 1. Open a blank Notepad file. 2. Write  .LOG  and not  .log  (case sensitive) as the first line of the file, followed by a enter. Save the file and close it. 3. Double-click the file to open it and notice that Notepad appends the current date and time to the end of the file and place the cursor on the line after. 4. Now type your notes, save and close the file. 5. Now place the cursor on the line after and type your notes. Each time you enter your notes, the time and date gets attached to the notes. Thus your Personal diary is ready to use now !
Read more

Create MultiSelect Dropdown using vue-multiselect

-
If you are working with bootstrap vue you might be noticed that bootstrap-vue doesn't have a searchable multi-select drop down yet. There are a lot of other vue plugins that provide this feature. I found vue-multiselect as a better one. It supports searchable multi-select dropdown with Vuex. It also has multiple props that can be used to parse option data. Let us create a simple vue-multi-select dropdown . Step 1: Install vue/multiselect via npm           npm install vue-multiselect --save Step 2: Import multiselect component inside vue file where ever its is used              <template>              </template>              <script>               import Multiselect from "vue-multiselect";              export default {         ...
Read more