This question is locked. New answers and comments are not allowed.
I'm trying to tweak the friends sample hybrid app to use it as a basis for my app.
I created a new view derived from the activities view which is supposed to display some news from an external source.
The #news-list-view is not being populated from the view, but when I created a dedicated #news listview independently from the view it works.
What am I missing here to get the view to work?
01.
<
div
id
=
"news-view"
data-role
=
"view"
data-title
=
"News"
data-layout
=
"main-nonav"
data-model
=
"app.newsView"
data-show
=
"app.newsView.newsViewModel.onShow"
class
=
"activities-view"
>
02.
<
header
data-role
=
"header"
>
03.
<
div
data-role
=
"navbar"
class
=
"header-text"
>
04.
05.
<
span
data-role
=
"view-title"
></
span
>
06.
07.
<
a
class
=
"button-icon button-menu"
data-role
=
"button"
href
=
"#appDrawer"
data-rel
=
"drawer"
data-align
=
"left"
></
a
>
08.
</
div
>
09.
</
header
>
10.
<
div
data-role
=
"nav-bar"
>
11.
<
a
class
=
"nav-button"
data-align
=
"left"
data-icon
=
"arrow-w"
data-role
=
"button"
data-click
=
"previousDay"
></
a
>
12.
<
span
id
=
"date"
>Today</
span
>
13.
<
a
class
=
"nav-button"
data-align
=
"right"
data-icon
=
"arrow-e"
data-role
=
"button"
data-click
=
"nextDay"
></
a
>
14.
</
div
>
15.
<!-- Displaying with news-list-view not working. Listview not initialized?-->
16.
<
ul
id
=
"news-list-view"
data-role
=
"listview"
data-template
=
"newsViewModelTemplate"
17.
data-bind
=
"source: newsViewModel.dataSource"
data-pull-to-refresh
=
"true"
data-endless-scroll
=
"true"
data-use-native-scrolling
=
"true"
>
18.
</
ul
>
19.
20.
<
script
type
=
"text/x-kendo-template"
id
=
"newsViewModelTemplate"
>
21.
<
div
class
=
"content"
>
22.
<
div
class
=
"content-header"
>
23.
<
a
href
=
"#: data['url'] #"
data-rel
=
"external"
target
=
"_blank"
> #: data['title'] #</
a
>
24.
</
div
>
25.
</
div
>
26.
</
script
>
27.
28.
<!--This way of displaying the listview works -->
29.
<
ul
id
=
"news"
></
ul
>
30.
31.
</
div
>
The JS source for the view + model is the following (model defined from line 181):
001.
'use strict'
;
002.
003.
var
companies =
new
Array();;
004.
var
headlines;
005.
var
startDate;
006.
var
endDate;
007.
headlines =
new
kendo.data.DataSource({
008.
group: { field:
"company"
},
009.
pageSize: 5,
010.
change:
function
() {
011.
//refresh();
012.
}
013.
});
014.
015.
function
previousDay(){
016.
var
prev = startDate.setDate(startDate.getDate()-1);
017.
fetch(prev);
018.
}
019.
020.
function
nextDay(){
021.
var
next = startDate.setDate(startDate.getDate()+1);
022.
fetch(next);
023.
}
024.
025.
function
refresh(){
026.
fetch(startDate);
027.
}
028.
029.
var
domains_blacklist = [
"gmail"
,
"googlemail"
,
"gmx"
,
"web"
,
"yahoo"
,
"hotmail"
,
"outlook"
,
"brandmaker"
];
030.
031.
032.
function
checkSimulator() {
033.
if
(window.navigator.simulator ===
true
|| window.plugins === undefined || window.plugins.calendar === undefined) {
034.
// Notify: Calendar plugin not available. Using default companies...
035.
return
true
;
036.
}
else
{
037.
return
false
;
038.
}
039.
}
040.
041.
// https://gist.github.com/bennadel/9751624#file-code-1-js
042.
function
GetEmailParts( strEmail ){
043.
// Set up a default structure with null values
044.
// incase our email matching fails.
045.
var
objParts = {
046.
user:
null
,
047.
domain:
null
,
048.
ext:
null
049.
};
050.
051.
// Get the parts of the email address by leveraging
052.
// the String::replace method. Notice that we are
053.
// matching on the whole string using ^...$ notation.
054.
strEmail.replace(
055.
new
RegExp(
"^(.+)@(.+)\\.(\\w+)$"
,
"i"
),
056.
057.
// Send the match to the sub-function.
058.
function
( $0, $1, $2, $3 ){
059.
objParts.user = $1;
060.
objParts.domain = $2;
061.
objParts.ext = $3;
062.
}
063.
);
064.
065.
066.
// Return the "potentially" updated parts structure.
067.
return
( objParts );
068.
}
069.
070.
function
extractCompanies(event){
071.
if
(event.attendees !=
null
){
072.
for
(
var
i=0; i<event.attendees.length; i++){
073.
var
email =
""
;
074.
if
(event.attendees[i].email !=
null
){
075.
email = event.attendees[i].email;
076.
}
077.
if
(email ==
""
&& event.attendees[i].URL !=
null
){
078.
email = event.attendees[i].URL.substring(7);
079.
}
080.
var
parts;
081.
if
(parts = GetEmailParts(email)){
082.
var
company = parts.domain;
083.
if
(companies.indexOf(company) == -1 && domains_blacklist.indexOf(company) == -1){
084.
companies.push(company);
085.
loadNews(company);
086.
}
087.
}
088.
}
089.
}
090.
}
091.
092.
// callbacks
093.
function
onSuccess(msg) {
094.
app.utils.loading(
true
);
095.
msg.forEach(extractCompanies);
096.
app.utils.loading(
false
);
097.
//console.error(JSON.stringify(headlines));
098.
}
099.
100.
function
onError(msg) {
101.
showNotification(
'Calendar error: '
+ JSON.stringify(msg));
102.
}
103.
104.
function
getCompanies(date){
105.
if
(date !=
null
&& date != undefined){
106.
startDate =
new
Date(date);
107.
endDate =
new
Date(date);
108.
$(
"#date"
).html(startDate.getDate()+
"."
+(startDate.getMonth()+1)+
"."
);
109.
}
else
{
110.
startDate =
new
Date();
111.
endDate =
new
Date();
112.
$(
"#date"
).html(
"Today"
);
113.
}
114.
115.
// current day
116.
startDate.setHours(0);
117.
endDate.setHours(24);
118.
startDate.setMinutes(0);
119.
endDate.setMinutes(0);
120.
startDate.setSeconds(0);
121.
endDate.setSeconds(0);
122.
123.
if
(checkSimulator() ===
true
|| window.plugins.calendar == undefined) {
124.
// Notification 'No access to calendar, showing demo companies.'
125.
var
dummyMsg =
new
Array();
126.
dummyMsg = [{
"id"
:
"1"
,
127.
"attendees"
: [{email:
"noreply@audi.de"
},
128.
{email:
"noreply@microsoft.com"
},
129.
{email:
"noreply@fifa.com"
}]
130.
}];
131.
onSuccess(dummyMsg);
132.
}
else
{
133.
// get all events of next 2 days
134.
window.plugins.calendar.findEvent(
""
,
""
,
""
, startDate, endDate, onSuccess, onError);
135.
}
136.
}
137.
138.
function
loadNews(query, index, array) {
139.
$.bingSearch({
140.
urlBase:
"http://ginkeo.com/briefme/searchproxy.php"
,
141.
pageNumber: 1,
142.
pageSize: 5,
143.
query: query,
144.
debug:
false
,
145.
beforeSearchResults:
function
(data) {
146.
//var headlines = [];
147.
},
148.
searchResultIterator:
function
(data) {
149.
if
(data == undefined){
150.
alert(
"No data"
);
151.
}
else
{
152.
headlines.add({company: query, title: data.Title, url: data.Url});
153.
}
154.
},
155.
afterSearchResults:
function
(data) {
156.
//console.error(JSON.stringify(headlines));
157.
}
158.
});
159.
}
160.
161.
function
fetch(date){
162.
163.
getCompanies(date);
164.
165.
if
(headlines.data.length > 0) {
166.
$(
"#news"
).kendoMobileListView({
167.
dataSource: headlines,
168.
template:
'<a href="#: url #" data-rel="external" target="_blank">#: title #</a>'
169.
});
170.
}
/*else{
171.
Notification no news
172.
}*/
173.
}
174.
175.
(
function
() {
176.
177.
var
view = app.newsView = kendo.observable();
178.
179.
app.newsView.shouldRefresh =
true
;
180.
181.
var
newsViewModel = kendo.observable({
182.
dataSource: headlines.dataSource,
183.
refreshOnShow:
true
,
184.
onShow:
function
() {
185.
if
(app.newsView.shouldRefresh) {
186.
187.
refresh();
188.
//console.log("read = "+JSON.stringify(headlines));
189.
app.newsView.shouldRefresh =
false
;
190.
}
else
if
(!headlines.data().length) {
191.
app.utils.loading(
true
);
192.
}
193.
},
194.
});
195.
//console.log(JSON.stringify(newsViewModel));
196.
view.set(
'newsViewModel'
, newsViewModel);
197.
198.
}());