Question

HTML代码：

<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代码：

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
}

这是javascript代码：

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() );
});

我的代码是做什么的？

我的代码会打印模板#the_template的内容，而不会使用标记名称（输入#{{= stripHTML(name) }}的值）替换#post_tags。

我需要做什么？

我想点击#add_tag_button时获取模板内容#the_template并将{{= stripHTML(name) }}替换为标记名称（输入#post_tags的值）。

Answer 1

试试这个：

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代码：

    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)}

由于您有多个替换元素，因此应使用Regx。

为Javascript呈现HTML模板

1 个答案: