Razor模型助手在jquery / handlebars无限滚动 [英] Razor model helpers in jquery/handlebars infinite scroll
问题描述
我使用MVC5，最初有一个标准的MVC实现和手动分页，一切都很好。除了当我把它展示给我的朋友时，他就像是这些数字都在这里有什么？ （指的是分页按钮，他用他的智能手机进行辩护时）。然后，我决定无限滚动会更好。
看起来像是百万次谷歌搜索之后，大多数解决方案（以及所有我可以实际解决的解决方案理解）使用json和jquery。由于我使用Troy Goode的PagedList来做手动分页，因此我在这里推荐了他的推荐解决方案：
然后，我用json，jquery和句柄提出了这个问题：
< div id = incidentsList >< / DIV>
< div id =incidentsWaypoint>。< / div>
@section脚本{
< script id =incident-templatetype =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>
{{说明}}
< / div>
< / div>
< div class =tRow>
< div class =pCount>
计数：{{计数}}
< / div>
< div class =pSend>
!!!!部分视图在这里!!!!
< / div>
< / div>
< / div>
< / script>
< script type =text / javascriptsrc =/ Scripts / handlebars-v3.0.3.js>< / script>
< script type =text / javascriptsrc =/ 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，标题：incident.Title，说明：incident.Description，Count：incident.Count};
var context = incident;
$ incdiv.append（template（context））;
} ）;
$ waypoint.waypoin t（opts）;
}）;
}，{offset：'100％'}）;
}）;
< / script>
}
据我所知，它运作良好，除了我现在似乎已经失去了使用razor html助手等的能力，更具体地说，具有如下逻辑的 @ Html.Partial（_ ProjectStatus，事件）：
if（！Model.IsOwner（Context.User.Identity.Name））
{
if（Model .IsSent（userId））
{
所以，我不能直接生成html为此...
我打算将把手模板切成更小的模板，然后希望在jquery中使用剃须刀助手，就像我从<$ c $开始c> var pPartial ，然后将它们一起附加到jquery代码中，但是在我做所有工作以查看我是否在正确的轨道上之前，希望将其发布到此处，特别是经过多次搜索后），我还没有真正发现任何人试图做到这一点。
因此，我的问题是（并且我不期望他们都回答了，我只是不知道该问什么，希望有人能看到我想要完成的事情），那么我在前一段中试图做的甚至是工作？剃刀助手/逻辑摆脱在句柄模板中的问题？有什么地方有例子吗？......尤其是那些有完整实现的人（即比简单的例子实际上使用助手/逻辑的列表更复杂一点）？是否有另一种方式来做无限滚动，这将允许我保留我的剃须刀代码或完全使用部分视图（或类似的）与最小的jquery可能？
与往常一样，我感谢任何指导。谢谢。
到目前为止，我通过移动我的视图逻辑来修复它（从nerddinner学到的......这也使我想想另一个问题）给控制器，只需将最后两行添加到我的json结果中，并将它们作为bools返回：
var incidents = listPaged.Select（items => new
{
items.IncidentId，
items.Title，
items.Description，
items.Count，
IsOwner = items.IsOwner（userName），//这一个
IsSent = items.IsSent（userId）//和这一个
}）;
然后在句柄中，我做了：
{{＃除非IsOwner}}
{{#if IsSent}}
< div class =sent>已发送...< / div> ;
{{else}}
< div class =sent> Not Sent ...< / div>
{{if}}
{{/ unless}}
I试图用@ Html.Action和其他一些东西来实现局部视图，这些东西真的让我的脑海里紧张起来，他们甚至可能会工作。我喜欢把事情简单化，而我所做的一些工作显然比较慢（〜20％）。
这个修复程序的速度也稍微快了大约10 ％ 一般。也许是因为我现在没有拉动模型中的每个领域？无论如何，希望我可以在模板中使用这些助手，但我可以忍受这一点，特别是因为它允许我继续前进...
我很想听取任何其他意见。谢谢。
I'm using MVC5 and originally had a standard MVC implementation with manual paging and all was well. Except, when I showed it to my friend, he's like "What are all these number things down here?" (referring to the paging buttons, in his defense he was using his smart phone). It was then I decided infinite scroll would be much better.
After what seems like a million google searches, most the solutions (as well as ALL the solutions that I can actually understand) use json and jquery. Since I was using Troy Goode's PagedList already to do the manual paging, I went with his recommended solution here:
How Can I Convert My Paging Functionality To Use AJAX Insead?
And, I came up with this using json, jquery and handlebars:
<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>
}
It works well as far as I can tell, except that I now seem to have lost the ability to use razor html helpers and such, more specifically that @Html.Partial("_ProjectStatus", incident) that has logic like:
if (!Model.IsOwner(Context.User.Identity.Name))
{
if (Model.IsSent(userId))
{
So, I can't just generate straight html for that...
I was going to chop the handlebars template up into smaller templates and then hopefully use the razor helpers in jquery like I started with the var pPartial and then append it all together in the jquery code, but wanted to post it here first before I do all the work to see if I'm even on the right track, especially since (after many more searches) I haven't really found anyone trying to do this.
Therefore, my question(s) is (and I wouldn't expect them all answered, I'm just not sure what to ask and hoping someone can see what I'm trying to accomplish), will what I'm trying to do in the previous paragraph even work? Are razor helpers/logic out of the question in handlebars templates? Are there examples somewhere?...especially of someone who has a full implementation (i.e. something a little more complex than just a list where the example actually uses helpers/logic in it)? Is there another way to do infinite scroll that would allow me to keep my razor code or solely use partial views (or similar) with minimal jquery maybe?
As always, I appreciate any guidance. Thank you.
So far, I fixed it by moving my view logic (learned from nerddinner...which also makes me think of another question) to the controller, by simply adding the last two lines to my json result and returning them as bools:
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
});
Then in handlebars, I did:
{{#unless IsOwner}}
{{#if IsSent}}
<div class="sent">Sent...</div>
{{else}}
<div class="sent">Not Sent...</div>
{{/if}}
{{/unless}}
I tried to do the partial view with @Html.Action and a few other things that were really straining my mind how they could even possibly work. I like to keep things simple and the couple things I got to sort-of work were noticeably slower (~20%).
This fix is slightly faster too by about 10% on average. Maybe because I'm not pulling every field in the model now? Anyway, wish I could use those helpers in the template, but i can live with this, especially since it allows me to move on...
I'd love to hear any other opinions. Thanks.
这篇关于Razor模型助手在jquery / handlebars无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
