Jag har stött på patrull gällande jQuery Mobile (JQM). Kan nämna att jag kör asp.net mvc 4 och knockoutjs, men jag vet inte hur relevant det är till problemet jag har. Hej, ska väll inleda med att säga att jag själv inte har pysslat något alls med jQuery Mobile men din fråga väckte min nyfikenhet. Jag glömde nämna att jag redan har provat det där och tyvärr så funkade inte det heller. Här är ett komprimerat exempel som jag fick att funka när jag körde det lokalt på min dator. Tänk på att du inte kan länka till deras senaste skarpa version av JQM eftersom det inte verkar finnas med där än. Intressant. Själv har jag provat två versioner, den som ingår när man skapar ett nytt mobilt webbrpojekt i VS2012 (1.0 tror jag) och den version som hänvisas på JQM's downloadsida (1.1). Jag körde den gamla klassikern "View source" från den testsida du länkat till (http://jquerymobile.com/test/docs/lists/lists-autodividers.html) och sparade ner sidan lokalt. Sen ändrade jag de relativa länkarna till CSS:erna och JS-filerna så att de pekade mot deras testversioner. Strippade även bort en del saker som inte verkade relevant (man hade förstås kunnat ta bort ännu mer). Jo, jag hittade felet om du läser min edit i tidigare post =D. Tack för hjälpen, Thomas.jQuery Mobile's listview - autodividers?
Har skapat en listview ( http://jquerymobile.com/test/docs/lists/docs-lists.html) och vill nu ha så kallade autodividers. Men jag får det inte att funka.. alls.
Min ursprungliga markup ser ut så här:
<ul id="absenseList" data-bind="foreach: students" data-role="listview" data-theme="d" data-split-icon="plus" data-split-theme="d">
<li style="margin-bottom: 3px;">
<a data-bind="attr: {href: createDetailedAbsenceUrl}">
<img src="#" data-bind="attr: { src: ProfilePictureLocation }" alt="This is a profile picture" />
<p id="fullname" data-bind="text: fullName"></p>
<p data-bind="fadeVisible: IsAbsense(), text: absenseOutput"></p>
</a>
</li>
</ul>
Så det är lite knockoutjs-syntax, men vet inte hur mycket det spelar roll. I JavaScript skriver jag:
$.getJSON("/api/absense", function (data) {
var students = data.map(function (json) {
SelectableViewModel.prototype = ko.mapping.fromJS(json);
return new SelectableViewModel();
});
ko.applyBindings(new AbsenseListViewModel(students));
$("#absenseList").listview({
autodividers: true,
autodividersSelector: function (li) {
console.log("autodividers");
return "Hi";
}
});
$("#fetchProgress").hide();
$("#absenseList").fadeIn("fast");
});
Men det dyker inte upp några dividers som på JQMs hemsida ( http://jquerymobile.com/test/docs/lists/lists-autodividers.html). Har även provat att kopierat hela < ul>-stycket från sidan och försökt köra lokalt, stängt av knockoutjs, länkat till JQM''''s CDN istället för den som inkluderas i asp.net mvc 4 projektet.. inget rockar. Någon som har haft samma erfarenhet och vet hur man fixar det?
/Joakim.
Sv: jQuery Mobile's listview - autodividers?
Vad jag kan se från jQuery Mobile Demo på autodividers så har dom på sin UL-tag satt "data-autodividers"-attributet till true som nedan:
<ul data-role="listview" data-autodividers="true">
Vilket jag inte ser i din kod, dock borde det då ha fungerat när du testade att kopiera exempelkoden. Men det kanske är en början på att lösa ditt problem!?
Sv:jQuery Mobile's listview - autodividers?
Dessutom så behöver jag nog ange en egen "autodividerselector" för att få kontroll över hur den ska dela upp listan. Tror inte att JQM är så automagiskt.Sv: jQuery Mobile's listview - autodividers?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - List Autodividers</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/lists/../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/lists/../_assets/css/jqm-docs.css"/>
<script src="http://jquerymobile.com/test/docs/lists/../../js/jquery.js"></script>
<script src="http://jquerymobile.com/test/docs/lists/../../docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/test/docs/lists/../../js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-autodividers="true">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
<li>Culver James</li>
</ul>
</div><!--/content-primary -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Sv:jQuery Mobile's listview - autodividers?
Du kanske hämtade från deras git-repository?
Edit:
Ser nu att jag förmodligen har hamnat på JQM's dokumentation för 1.2 pre när jag har googlat runt, t.ex: http://jquerymobile.com/test/docs/lists/docs-lists.html vilket är den första träffen man får om man bara googlar "jQuery Mobile list". Väl inne i någon subsida så syns det inte vilken version dokumentationen hänvisar till, om man inte kollar lite extra noga i url:en eller går till hem-sidan.
Om man går via jquerymobile.com och kollar dokumentationen så hamnar man rätt och ser att det inte finns stöd för autodividers.
Goddammit. Ahja, man lär sig alltid nått. Lite hårt att spendera en halvdag på det här bara.Sv: jQuery Mobile's listview - autodividers?
=)Sv:jQuery Mobile's listview - autodividers?