1

我正在研究一个无限滚动，如下所示：

<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 吗？我不想引入很多脚本...

4

2 回答 2

2

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

$('<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);
于 2013-04-24T12:59:42.317 回答
1

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

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
于 2013-04-24T12:59:35.367 回答