渲染Java脚本的HTML模板

Question

HTML Code:

<form id="add_post">
    <div id="post-add-tag">
        <div class="input-group">
            <input type="text" id="post_tags" name="post_tags" />
            <span class="input-group-btn">
                <button id="add_tag_button" type="submit">Add</button>
            </span>
        </div>
        <ul id="tags_list"></ul>
    </div>
</form>

PHP code that prints this scripts into footer:

function post_tag_template(){
    ?>
    <script type="text/template" id="the_template">
        <li>
            <input type="hidden" name="items[]" value="{{= stripHTML(name) }}" />
            {{= stripHTML(name) }}
        </li>
    </script>
    <script type="text/javascript">
        function stripHTML(html)
        {
           var tmp = document.createElement("DIV");
           tmp.innerHTML = html;
           return tmp.textContent||tmp.innerText;
        }
    </script>
    <?php
}

and this is the javascript code:

function addTag(tag) {
    var form        = $('form#add_post'),
        tags_list   = form.find('ul#tags_list'),
        source      = $('#the_template').html();    

    tags_list.append(source);
}

$(document).on('click', 'form#add_post #add_tag_button', function(e) {
    e.preventDefault();

    addTag( $('input#post_tags').val() );
});

What are my codes do?

My codes print the content of template #the_template without replace #{{= stripHTML(name) }} with the tag name (The value of input #post_tags ).

What do I need to do?

I want when I click on #add_tag_button get the template content #the_template and replace {{= stripHTML(name) }} with the tag name (The value of input #post_tags ).

Answer 1

try this:

function post_tag_template(){
    ?>
    <script type="text/template" id="the_template">
        <li>
            <input type="hidden" name="items[]" value="{{PlainName}}" />
            {{PlainName}}
        </li>
    </script>
    <script type="text/javascript">
        function stripHTML(html)
        {
           var tmp = document.createElement("DIV");
           tmp.innerHTML = html;
           return tmp.textContent||tmp.innerText;
        }
    </script>
    <?php
}    

Javascript code:

    function addTag(tag) {
    var form        = $('form#add_post'),
        tags_list   = form.find('ul#tags_list'),
        source      = $('#the_template').html();   

   var search1 = /{{PlainName}}/g;
    tags_list.append(source.replace(search1, stripHTML(name)}

Since you have multiple replace elements, you should use Regx.