jquery/handlebars 中的 Razor 模型助手无限滚动

Question

我使用的是 MVC5，最初有一个带有手动分页的标准 MVC 实现，一切都很好。除了，当我把它展示给我的朋友时，他就像“这里的这些数字是什么？” （指的是寻呼按钮，在他的辩护中，他正在使用他的智能手机）。那时我决定无限滚动会好得多。

在看起来像一百万个谷歌搜索之后，大多数解决方案（以及我能真正理解的所有解决方案）都使用 json 和 jquery。由于我已经在使用 Troy Goode 的 PagedList 进行手动分页，因此我在这里采用了他推荐的解决方案：

How Can I Convert My Paging Functionality To Use AJAX Insead?

而且，我使用 json、jquery 和把手想出了这个：

<div id="incidentsList"></div>
<div id="incidentsWaypoint">.</div>

@section Scripts{
    <script id="incident-template" type="text/x-handlebars-template">
    <div class="tRoot">
        <div class="tRow">
            <div class="index-title">
                <a href="/Incidents/Details/{{IncidentId}}">{{Title}}</a>
            </div>
        </div>
        <div class="tRow">
            <div class="index-description">
                {{Description}}
            </div>
        </div>
        <div class="tRow">
            <div class="pCount">
                Count: {{Count}}
            </div>
            <div class="pSend">
                !!!!Partial View Here!!!!
            </div>
        </div>
    </div>
</script>
    <script type="text/javascript" src="/Scripts/handlebars-v3.0.3.js"></script>
    <script type="text/javascript" src="/Scripts/waypoints.min.js"></script>
    <script type="text/javascript">
    var source = $("#incident-template").html();
    var template = Handlebars.compile(source);
    $(function () {
        var page = 1;
        var $incdiv = $('#incidentsList');
        var $waypoint = $('#incidentsWaypoint');

        var opts = { offset: '100%' };
        $waypoint.waypoint(function () {
            $waypoint.waypoint('remove');
            $.getJSON('@Url.Action("AjaxPage", "Incidents")', { page: page++ }, function(incidents) {
                    $.each(incidents, function (index, incident) {
                        var pPartial = '@Html.Partial("_ProjectStatus", incident)';
                        //console.log(incident.Title);
                        //var context = { IncidentId: incident.IncidentId, Title: incident.Title, Description: incident.Description, Count: incident.Count };
                        var context = incident;
                        $incdiv.append(template(context));
                    });
                    $waypoint.waypoint(opts);
                });
            }, { offset: '100%' });
        });
    </script>
}

据我所知，它运行良好，只是我现在似乎失去了使用 razor html 助手等的能力，更具体地说，@Html.Partial("_ProjectStatus", incident) 的逻辑如下：

if (!Model.IsOwner(Context.User.Identity.Name))
    {

        if (Model.IsSent(userId))
        {

所以，我不能只为此生成直接的 html...

我打算将车把模板切成更小的模板，然后希望像我从 var pPartial 开始一样在 jquery 中使用剃须刀助手，然后将它们全部附加到 jquery 代码中，但想先在这里发布在我做所有工作之前，看看我是否走在正确的轨道上，特别是因为（经过多次搜索）我还没有真正找到任何人尝试这样做。

因此，我的问题是（我不希望他们都回答，我只是不确定要问什么，希望有人能看到我想要完成的事情），我会做什么试图在上一段中做甚至工作？车把模板中的剃须刀助手/逻辑是否存在问题？某处有示例吗？...尤其是具有完整实现的人（即比示例实际在其中使用帮助器/逻辑的列表更复杂的东西）？是否有另一种无限滚动的方法可以让我保留我的剃须刀代码或仅使用带有最少 jquery 的部分视图（或类似视图）？

一如既往，我很感激任何指导。谢谢。

Answer 1

到目前为止，我通过将我的视图逻辑（从 nerddinner 学习......这也让我想到另一个问题）移动到控制器来修复它，只需将最后两行添加到我的 json 结果并将它们作为布尔值返回：

var incidents = listPaged.Select(items => new
        {
            items.IncidentId,
            items.Title,
            items.Description,
            items.Count,
            IsOwner = items.IsOwner(userName), // this one
            IsSent = items.IsSent(userId) //and this one
        });

然后在车把上，我做到了：

{{#unless IsOwner}}
   {{#if IsSent}}
     <div class="sent">Sent...</div>
   {{else}}
     <div class="sent">Not Sent...</div>
   {{/if}}
{{/unless}}

我试图用@Html.Action 和其他一些事情来做局部视图，这些事情真的让我很紧张，他们甚至可能如何工作。我喜欢把事情简单化，我做的几件事明显变慢了（~20%）。

这个修复也稍微快一点，平均大约快 10%。也许是因为我现在没有拉动模型中的每个字段？无论如何，希望我可以在模板中使用这些助手，但我可以忍受这个，特别是因为它允许我继续前进......

我很想听听任何其他意见。谢谢。