_templatize example usage - full output

<?php
// Output this at the top of the post-edit screen just below the title input.
add_action( 'edit_form_after_title', function() {

    // Hook in our template script tag to the footer.
    add_action( 'admin_footer', 'zao_item_status_tmpl' );

    // Hook in our custom JS for updating the status.
    add_action( 'admin_footer', 'zao_item_status_js' );

    // Clone _templatize to your theme's js folder (https://github.com/jtsternberg/underscorejs-templatize)
    wp_enqueue_script( '_templatize', get_stylesheet_directory_uri() . '/js/_templatize/_templatize.js' ), array( 'underscore' ), '0.1.0', true );

    // Make the initial output have a yellow status square
    ?>
    <span class="zao-status"><span style="display: inline-block;background-color:#ffe24d;width:10px; height:10px;"></span> Please wait...</span>
    <?php
} );

function zao_item_status_tmpl() {
    ?>
    <script type="text/html" id="tmpl-zao-item-status">
        <span class="zao-status" data-id="{{ data.id }}">
        <# if ( data.status.name ) { #>
            <div class="zao-item-status">
                <span class="zao-status-color" style="display: inline-block;background-color:{{ data.status.color }};width:10px; height:10px;"></span>
                {{{ data.open }}}
                    {{ data.status.name }}
                {{{ data.close }}}
            </div>
        <# } else { #>
            &mdash;
        <# } #>
        </span>
    </script>
    <?php
}

function zao_item_status_js() {
    ?>
    <script type="text/javascript">
        // Wait for the dom to be ready..
        jQuery( function( $ ) {

            var template = window._templatize();

            // Let's wait a tick, so we can see it go from yellow to green.
            setTimeout( function() {

                // Let's fake some data (maybe this is data from an API request?)
                var tmplData = {
                    id: 1,
                    status: {
                        name: 'Success!',
                        color: 'green'
                    }
                };

                // Pass an html template and give it an id of 'zao-item-status-open', for reuse later.
                tmplData.open = template( 'zao-item-status-open', tmplData, '<span class="status-name" style="color:{{ data.status.color }}">' );
                tmplData.close = '</span>';

                // Send the data to our new template function, get the HTML markup back.
                var html = template( 'zao-item-status', tmplData );

                // Now let's replace the contents of the existing markup with our updated template markup.
                $( '.zao-status' ).html( html );
            }, 1500 );
        });
    </script>
    <?php
}
_templatize example usage – full output

Related
