How templates work?


The templates are the most important and at the same time the most interesting part of VS Builder. They permit you to create large blocks of code in seconds. Take a look at the code below to see how templates work. If you want to learn more about templates and theirs possibilities take a look at the underscore's template system.

VSComponents.add({
    title: "Logo",
    form: {
        align: true, // Returns a select with the 'dataName' set to 'align'. Depending on what option will be set in the select, you'll get 'l-al', 'l-ac' or 'l-ar' (witch stands for layour align left, layout align center and layout align right). So you can use them as classes in your template.

        // Describe the list of inputs and don't forget to set to all of them a 'dataName', because that's how you can access them from the template.
        inputList: [
            {
                type: "text",
                tooltip: "Write the url for the logo image",
                label: "Image logo",
                dataName: "image",
                dataType: "image",
                important: true,
                path: "img/logos/"
            },
            {
                type: "text",
                tooltip: "Write a URL to the logo on click action, ex:'index.html'",
                label: "Url address for logo",
                dataName: "url"
            }
        ]
    },

    // Now within your template you can use already created inputs.  All you have to do is to scope them with '<%= dataName %>'.
    // If your input has a 'dataType' set to 'multiple', you can loop through values using the underscore's each function like in the example below.
    // <% _.each(dataName, function(item){ %>
    //      <p><%= item %></p>    
    // <% }) %> 
    template: [
        "<section>",
            "<div class='logo-wrapper <%= align %> '>",
                "<h3 class='logo'>",
                    "<a href='<%= url %>'>",
                        "<img src='<%= image %>' alt='logo'>",
                    "</a>",
                "</h3>",
            "</div>",            
        "</section>"
    ].join('')
});

Last update:
2014-11-22 12:33
Author:
Vlad Sargu
Revision:
1.0
Average rating: 5 (1 Vote)