Question

我正在进行无限滚动，如下所示：

<script type="text/javascript">
    $(function () {
        var page = 1;
        var $ol = $('#namesList');
        var $waypoint = $('#namesWaypoint');

        var opts = { offset: '100%' };
        $waypoint.waypoint(function () {
            console.log('waypoint triggered');
            $waypoint.waypoint('remove');
            $.get('/Home/AjaxPage?page=' + page++, function (data) {
                data.names.forEach(function (name) {
                    $ol.append($('<li class="span3" style="margin-bottom: 0 !important;">').text(name));
                });
                $waypoint.waypoint(opts);
            });
        }, { offset: '100%' });
    });
</script>

见这一行：

 $ol.append($('<li class="span3" style="margin-bottom: 0 !important;">').text(THEFOLLOWINGCODEBLOCK));

我需要在其中添加以下内容：

<li class="span3" style="margin-bottom: 0 !important;">
                <div class="thumbnail">
                    <div>
                        <a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">
                            <img src="@item.MainImage.Path?width=260&height=150" alt=""></a><br />
                        <strong class="other_news"><a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">@Html.Truncate((string)item.Title, 30)</a></strong>
                        <br />
                        <span class="detail_content">@Html.Truncate((string)item.PreviewText, 75)</span>
                        <br />
                        <span class="detail_content">@item.DatePublished.ToString("dd/MM/yyyy")</span>
                    </div>
                </div>
            </li>

有更简洁的方法吗？

我应该使用jquery tmpl吗？我不想带来很多脚本......

Answer 1

您可以执行以下操作，例如：

$('<li></li>')
    .addClass('span3')
    .css({
        'margin-bottom' : '0',
        'more-css' : 'can-be-placed-here'
    })
    // Use either append or html, depending on your circumstance
    .append(YOUR_ELEMENT)
    .html(YOUR_CODE_STRING)
    .appendTo($ol);

或者正如您所提到的，使用某种模板引擎，例如jQuery.tmpl。

不幸的是，没有办法在JS中执行这个清理工具。对于每种情况，您应该对您评估的内容最具可读性和可理解性。上面我简单地通过缩进使其更具可读性并将每条指令分解为它自己的行。

就没有引擎的模板而言，您可以将以下内容附加到HTML文档中：

<script id="myTemplate" type="text/template">
    <div class="thumbnail">
        <div>
            <a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">
                <img src="@item.MainImage.Path?width=260&height=150" alt=""></a><br />
            <strong class="other_news"><a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">@Html.Truncate((string)item.Title, 30)</a></strong>
            <br />
            <span class="detail_content">@Html.Truncate((string)item.PreviewText, 75)</span>
            <br />
            <span class="detail_content">@item.DatePublished.ToString("dd/MM/yyyy")</span>
        </div>
    </div>
</script>

然后使用它来生成一个使用该标记的新元素，如下所示：

var $tpl = $($('#myTemplate').html());
$tpl.find('.detail_content').text('Hai der');
$listItem.append($tpl);

Answer 2

这不是一个更清洁的方式，但我可以建议更快的方式：

var content = '';
data.names.forEach(function (name) {
    content += '<li class="span3" style="margin-bottom: 0 !important;">' + name + '</li>';
});
$ol.append($(content)); // Call append only once

将html附加到元素的更清洁的方法

2 个答案: