如何用jQuery中的變量對象替換HTML中的變量？

Question

我試圖為我的網頁創建一個系統，該系統獲取HTML中找到的模板的內容，然后將適當的變量替換為存儲在對象中的相應值。 問題是什么都沒有被取代。 在此示例中，我獲取了顯示論壇帖子的RSS文件的內容。 我使用ajax來獲取內容，然后遍歷每個項目。 我將xml標記值分配給一個對象，該對象的鍵與HTML模板中的變量相對應。 對於找到的每個帖子，都應使用xml標簽的內容替換HTML變量。

這是我的Javascript：

$.ajax({
        url: "rsstest.xml",
        type: "GET",
        dataType: 'xml',
        crossDomain: true,
        success: function(xml){
            var news = $('#news-results');
            news.empty();
            if($(xml).find('item').length > 0){
                $(xml).find('item').each(function(){
                    var temp_vars = {
                            news_title: $(this).find('title').text(),
                            news_body: $(this).find('description').text(),
                            news_date: $(this).find('pubDate').text(),
                            news_link: $(this).find('link').text()
                    }
                    var template = $('#news-template').contents().clone();
                    for(const variable in temp_vars){
                        template.text().replace("{"+variable+"}", temp_vars[variable])
                    }
                    news.append(template);
                })
            } else {
                news.append($('<p></p>').text('There is no news to display at this time.'));
            }
        }
    })

這是我的HTML：

<h1>Announcements</h1>
<div id="news-results">
</div>
<div id="news-template" style="display: none;">
    <div class="media">
        <div class="media-body">
            <h3>{news_title}</h3>
            <p>{news_body}</p>
            <div class="media-footer">
                <div class="col-left">
                    <h4>Posted on {news_date}</h4>
                </div>
                <div class="col-right">
                    <a href="{news_link}" class="btn btn-default">Read More</a>
                </div>
            </div>
        </div>
    </div>
</div>

我究竟做錯了什么？

Answer 1

下面的代碼將僅替換文本而不分配文本。

template.html().replace("{"+variable+"}", temp_vars[variable])

替換文本后，您必須進行分配以更新實際值。

template.html(template.html().replace("{"+variable+"}", temp_vars[variable]))