Ich muss auf Tizen TV mehrere Listen von Produkten, eine Liste nach Kategorie anzeigen. Ich benutze Caph 3.1.0 mit eckigen und Samsung TOAST.caph-list funktioniert nicht wenn mehr als eine Liste
Zuerst verbinde ich mich mit unserem Server, um alle unsere Produkte zu bekommen, und dann diese Produkte zu verwenden. Jedes Produkt hat eine oder mehr ‚Kategorie‘ Feld, dann verwende ich die Produkte Kategorien in $ scope.categories und sortierten Produkte in $ scope.sortedList wie folgt zu erhalten:
-Code in controller.js
$scope.categories = ['A', 'B', 'C'];
$scope.sortedList = [
A: [P1, P2],
B: [P1, P3, P4],
C: [P2, P5]
]
dann in hTML-Dateien, habe ich caph Video-Player Probe (https://www.samsungdforum.com/caphdocs/main.html?type=angular&doc=demo&p1=0):
-Code in main.html:
<div id="list-category" class="list-category">
<play-list ng-repeat="cat in categories" id="{{cat}}"></play-list>
</div>
-Code in playlist.html
<div class="list-area" ng-class="{'list-fadeout': currentCategory !== listCategory}">
<caph-list id="list-{{listCategory}}" container-class="list-container" items="item in sortedList[listCategory]" on-scroll-start="onScrollStart($context)" on-scroll-finish="onScrollFinish($context)" mouse-scroll-area-size="40" loop="false">
<div id="{{listCategory}}-{{item.id}}" class="item" focusable="{depth: {{DEPTH.INDEX}}, nextFocus: {down: 'btnPlay'}}" data-focusable-initial-focus="{{$index === 0}}" on-focused="focus($event, listCategory, this, $index)" on-blurred="blur($event, listCategory, this)" on-selected="booting.show=true">
<img ng-if="item.mainUrl" ng-src="{{item.mainUrl}}" alt="{{item.name}}" title="{{item.name}}" style="width: 300px; height: 200px;"/>
</div>
</caph-list>
</div>
Die playList-Direktive ist die gleiche wie in der Probe.
Und hier ist meine CSS-Datei:
-Code in main.css
.list-container {
position: absolute;
width: 1680px;
height: 265px;
overflow: hidden;
margin-top: 0;
padding-top: 25px;
background-color: #e6e6e6;
}
.item {
position: relative;
width: 300px;
height: 200px;
-webkit-box-sizing: border-box;
margin: 0 14px 0 0;
}
In Datei index.html, CSS ist vor jeder js-Datei enthalten.
Dann starte ich 'cordova emulieren Browsers Befehl das Ergebnis im Chrome-Browser, um zu sehen, aber ich erhalte immer die Fehlermeldung:
Fehler im Browser:
Error: The caph-list's container and template view should have their own size such as width and height.
Ich habe versucht, die Playlist-Richtlinie zu entfernen und setzen cap-list direkt mit dem ng-repeat, hat aber das selbe Ergebnis.
Könnte jemand bitte helfen?
Dank