So I'm sure this is something simple but i can't figure it out.. My directive is working, but the css is not. this is an ionic-framework project
my index.html is the main template loading the css
...
<link href="css/style.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="js/services.js"></script>
<script src="js/calendar.js"></script>
</head>
<body ng-app="starter">
...
tab-dash.html is being loaded via ionic
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Health</div>
<div class="item item-body">
<div>
You ate an apple today!
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Calendar</div>
<div class="item item-body">
<calendar selected="day"></calendar>
</div>
</div>
the style.css
calendar
{
float:left;
display:block;
.border-box;
background:white;
width:300px;
border:solid 1px #border-color;
margin-bottom:10px;
#secondary-color:#2875C7;
#spacing:10px;
#icon-width:40px;
#header-height:40px;
>div.header
{
float:left;
width:100%;
background:#secondary-color;
height:#header-height;
color:white;
>* { .vertical-center(#header-height); }
>i
{
float:left;
width:#icon-width;
font-size:1.125em;
font-weight:bold;
position:relative;
.border-box;
padding:0 #spacing;
cursor:pointer;
}
>i.fa-angle-left { text-align:left; }
>i.fa-angle-right
{
text-align:right;
margin-left:#icon-width*-1;
}
>span
{
float:left;
width:100%;
font-weight:bold;
text-transform:uppercase;
.border-box;
padding-left:#icon-width+#spacing;
margin-left:#icon-width*-1;
text-align:center;
padding-right:#icon-width;
color:inherit;
}
}
>div.week
{
float:left;
width:100%;
border-top:solid 1px #border-color;
&:first-child { border-top:none; }
>span.day {
float:left;
width:100%/7;
.border-box;
border-left:solid 1px #border-color;
font-size:0.75em;
text-align:center;
.vertical-centre(30px);
background:white;
cursor:pointer;
color:black;
&:first-child { border-left:none; }
&.today { background:#E3F2FF; }
&.different-month { color:#C0C0C0; }
&.selected {
background:#secondary-color;
color:white;
}
}
&.names>span {
color:#secondary-color;
font-weight:bold;
}
}
}
calendar.js
angular.module('starter.Directives', []);
angular.module('starter.Directives').directive("calendar", function(){
return {
restrict: "AEC",
templateUrl: "templates/calendar.html",
scope: { selected: "=" },
link: function(scope) {
scope.selected = _removeTime(scope.selected || moment());
scope.month = scope.selected.clone();
var start = scope.selected.clone();
start.date(1);
_removeTime(start.day(0));
_buildMonth(scope, start, scope.month);
scope.select = function(day) { scope.selected = day.date; };
scope.next = function() {
var next = scope.month.clone();
_removeTime(next.month(next.month()+1).date(1));
scope.month.month(scope.month.month()+1);
_buildMonth(scope, next, scope.month);
};
scope.previous = function() {
var previous = scope.month.clone();
_removeTime(previous.month(previous.month()-1).date(1));
scope.month.month(scope.month.month()-1);
_buildMonth(scope, previous, scope.month);
};
}
};
function _removeTime(date){
return date.day(0).hour(0).minute(0).second(0).millisecond(0); }
function _buildMonth(scope, start, month) {
scope.weeks = [];
var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
while (!done) {
scope.weeks.push({ days: _buildWeek(date.clone(), month) });
date.add(1, "w");
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
}
function _buildWeek(date, month) {
var days = [];
for (var i = 0; i < 7; i++) {
days.push({
name: date.format("dd").substring(0, 1),
number: date.date(),
isCurrentMonth: date.month() === month.month(),
isToday: date.isSame(new Date(), "day"),
date: date
});
date = date.clone();
date.add(1, "d");
}
return days;
}
});
Angular is clearly loading. Its working and generating a calendar like it should, but without any of the CSS. so what did i do wrong?
Looking at the debugger in safari there are no errors or warnings of any type. and same with chrome.
Related
I have used ng-repeat to display a set of values as hyperlink which further opens related data in very next DIV. Now when I click on the link, after loading data in respective div, how can I disable the clicked link?
angular.module('app', []).controller('ctrl', function($scope){
$scope.items = [
{name:'First', descr:'First Description'},
{name:'Second', descr:'Second Description'},
{name:'Third', descr:'Third Description'}
]
var visited = [];
$scope.act = function(item){
if(visited.indexOf(item.name) == -1){
item.dis = true;
$scope.active = item;
visited.push(item.name);
}
}
})
.dis {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<a ng-class='{dis:x.dis}' ng-repeat-start='x in items' href='#' ng-click='act(x)'>
{{x.name}}
</a>
<br ng-repeat-end>
<div>
{{active.descr}}
</div>
</div>
The thing is as told in the title.
(function(){
var app = angular.module('sbi', [ ]);
app.controller('PanelController', function (){
this.tab = 1;
this.selectTab = function (setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
app.controller('MyCtrl', function($scope, $compile) {
'use strict';
$scope.data = { "name": ""};
$scope.reset = function() {
$scope.data.name = "";
$scope.data.codeSub = "";
$scope.data.cognSub = "";
$scope.data.codfis = "";
$scope.data.drpdownvalue = "";
$scope.form.$setPristine();
}
});
app.controller('DdController', function($scope, $compile) {
'use strict';
var loadUrl = contextName+"/subinstaller/inserimento/dettaglio.do?methodName=doListenerStato";
$.ajax({
async: false,
url : loadUrl,
type: "GET",
data: data,
dataType: 'json',
cache: false,
complete: function(){
_show_(false,'waitPanel');
},
success : function (data, stato) {
$('#service').empty()
for(var i = 0; i < data.length; i++) {
$("#service").append($('<option value="'+data[i].code+'">'+data[i].descr+'</option>'));
}
$('#service').trigger("chosen:updated");
},
error : function (richiesta, stato, errori) {
_show_(false,'waitPanel');
alert("error caricaServices");
}
});
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script><!DOCTYPE html>
<html ng-app="sbi">
<head>
<link href="utils/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<style>
table, td { border-width: 2px; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; }
table.pos_fixed1 { position:relative; top:30px; left:10px; }
</style>
</head>
<body>
<form name="form">
<div data-ng-controller="MyCtrl">
<table summary="" width="10%" class="pos_fixed1" align="center">
<tr><td>Code Subinstaller<br><input type="text" ng-model="data.codeSub" /></td>
<td>Stato<br>
<select ng-model="data.drpdownvalue">
<option value=""> -- Seleziona -- </option>
</select> </td><td></td></tr>
<tr><td>Nome Sub Installer<input type="text" ng-model="data.name" /></td>
<td>Cognome Sub Installer<input type="text" ng-model="data.cognSub" /></td>
<td>Codice Fiscale<input type="text" ng-model="data.codfis" /></td></tr>
</table><br><br>
</form>
<section>
<div class="text-center">
<form name="form" id="form" novalidate>
<div>
<button class="btn-xs" data-ng-click="">Cerca</button>
<button class="btn-xs" ng-click="reset()">Pulisci</button>
</div>
</div>
</form>
</div>
</section>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills" >
<li ng-class="{ active:panel.isSelected(1) }"> <a href ng-click="panel.selectTab(1)">Risultati</a></li>
<li ng-class="{ active:panel.isSelected(2) }"> <a href ng-click="panel.selectTab(2)">Dettaglio</a></li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Risultati</h4>
<p> :))) </p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Dettaglio</h4>
<p> Not skilled enough yet</p>
</div>
</section>
<script type="text/javascript" src="utils/angular.min.js"></script>
<script type="text/javascript" src="controllers/sbi_inserimento_controller1.js"></script>
</body>
</html>
The function "DoListenerStato" has its query and it works (tried in Java)
But the combobox is not being populated.
Have I used ajax correctly? If so, what can I do?
I'd prefer to keep using ajax for this work, if possible.
Can you try $http.get instead of $.ajax.
in Controller.js file:
$scope.data = {};
$http.get(loadUrl).then(function (response){
$scope.data = response.data;
//success callback
}, function (response) {
//error callback
});
Since you already have data.**** in your ng-model this should solve it.
I am new to AngularJS, and I have been trying to modify the AngularUI Calendar but I ran into some issues while using Bootstrap Popovers to modify the events when clicked.
I want the default view to be agendaWeek, which is working fine, but as soon as I change the view, resize or drag / drop, the popover content disappears and I have no idea why.
However, if I keep the popover open during any of those operations, it displays the content of the popover after the change, but leaves behind an empty popover while closing.
I am not concerned about the empty popover as I can hide them all but I want the popovers to display the content properly when I perform any operation. How can I achieve that?
/*
* myCalendar.js
*/
angular.module('ui.calendar', ['ui.calendar', 'ngAnimate', 'ui.bootstrap'])
.controller('CalendarCtrl', function($scope, $compile, $timeout, uiCalendarConfig) {
$scope.event = {
id: 0,
title: '',
start: null,
end: null,
attribute1: '',
attribute2: ''
};
$scope.events = [{
id: 1,
title: 'New Event 1',
start: moment('2016-04-14 06:00', 'YYYY-MM-DD HH:mm'),
end: moment('2016-04-14 08:00', 'YYYY-MM-DD HH:mm'),
attribute1: 'Attr 1',
attribute2: 'Attr 2',
state: 'closed'
}, {
id: 2,
title: 'New Event 2',
start: moment('2016-04-14 02:00', 'YYYY-MM-DD HH:mm'),
end: moment('2016-04-14 04:00', 'YYYY-MM-DD HH:mm'),
attribute1: 'First attr',
attribute2: 'Second attr',
state: 'closed'
}];
$scope.hidePopover = {
show: false
};
$scope.onEventRender = function(event, element) {
element.popover({
placement: 'right',
html: true,
trigger: 'manual',
content: $('#popover'),
container: 'body'
});
$scope.events[$scope.getEventIndex(event.id)].popoverElement = element;
};
$scope.onEventClick = function(event, jsEvent, view) {
var index = $scope.getEventIndex(event.id);
if ($scope.events[index].state == 'closed') {
$scope.hidePopover.show = true;
$scope.event = event;
$scope.$apply();
$scope.hideOtherPopups();
$scope.events[index].popoverElement.popover('show');
$scope.events[index].state = 'open';
console.log("Event", event);
} else {
$scope.events[index].popoverElement.popover('hide');
$scope.updatePopover(event);
$scope.events[index].state = 'closed';
}
};
$scope.getEventIndex = function(id) {
var index = -1;
for (var i = 0; i < $scope.events.length; i++) {
if ($scope.events[i].id == id) {
index = i;
}
}
return index;
};
$scope.hideOtherPopups = function() {
for (var i = 0; i < $scope.events.length; i++) {
if ($scope.events[i].state == 'open') {
$scope.events[i].state = 'closed';
$scope.events[i].popoverElement.popover('hide');
$scope.updatePopover($scope.event);
}
}
};
$scope.updatePopover = function(event) {
$('#calendar').fullCalendar('updateEvent', event);
};
$scope.changeView = function(view, calendar) {
$scope.hideOtherPopups();
uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
};
$scope.onEventDragStart = function(event, delta, revertFunc, jsEvent, ui, view) {
$scope.hideOtherPopups();
};
$scope.onEventResizeStart = function() {
$scope.hideOtherPopups();
};
$scope.renderCalender = function(calendar) {
$timeout(function() {
if (uiCalendarConfig.calendars[calendar]) {
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
});
};
$scope.uiConfig = {
calendar: {
height: 1180,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
defaultView: 'agendaWeek',
eventRender: $scope.onEventRender,
eventClick: $scope.onEventClick,
eventDrop: $scope.onEventDrop,
eventResizeStart: $scope.onEventResizeStart,
eventDragStart: $scope.onEventDragStart
}
};
$scope.eventSources = [$scope.events];
});
/*
* custom.css
*/
body {
margin-top: 200px;
}
hr {
border-color: lightgray;
}
#leftDiv {
float: left;
border: 1px solid gray;
width: 300px;
height: 1140px;
padding: 20px;
text-align: center;
background-color: #eeeeee;
}
#hiddenDiv {
margin-top: 20px;
height: 300px;
border: 1px solid darkgray;
}
#rightDiv {
float: left;
border: 1px solid darkgray;
}
<!--index.html-->
<!DOCTYPE html>
<html lang="en" ng-app="ui.calendar" id="top">
<head>
<title>Calendar</title>
<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/bootstrap-css/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.css" />
<link rel="stylesheet" href="custom.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.1.js"></script>
<script src="https://angular-ui.github.io/ui-calendar/bower_components/moment/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/gcal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.js"></script>-->
<script src="myCalendar.js"></script>
</head>
<body data-spy="scroll">
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
</div>
</div>
</header>
<div role="main" ng-controller="CalendarCtrl">
<div id="leftDiv">
<div id="buttons" class="btn-group">
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">Day</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">Week</button>
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
</div>
<div id="hiddenDiv">
<div id="popover" ng-show="hidePopover.show">
<div class="form-group">
<label>New Title</label>
<input type="text" ng-model="event.title" class="form-control" />
<label>New Attribute 1</label>
<input type="text" ng-model="event.attribute1" class="form-control" />
<label>New Attribute 2</label>
<input type="text" ng-model="event.attribute2" class="form-control" />
</div>
</div>
</div>
<hr />
</div>
<div id="rightDiv">
<div class="span12">
<div id="calendar" class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
</div>
</div>
</div>
</body>
</html>
I figured it out thanks to this thread.
I created another div and set it to ng-show='hidePopover.hide' while the original popover div was set to ng-show='hidePopover.show' and then used .appendTo() to append the contents of the original div to the new div in my onEventClick function.
Here is my updated code.
/*
* myCalendar.js
*/
$scope.hidePopover = {
show: false
};
$scope.onEventClick = function(event, jsEvent, view) {
$('#popover').appendTo($('#new_div'));
var index = $scope.getEventIndex(event.id);
if ($scope.events[index].state == 'closed') {
$scope.hidePopover.show = true;
$scope.event = event;
$scope.hideOtherPopups();
$scope.events[index].popoverElement.popover('show');
$scope.events[index].state = 'open';
$scope.$apply();
} else {
$scope.events[index].popoverElement.popover('hide');
$scope.updatePopover(event);
$scope.events[index].state = 'closed';
$scope.$apply();
}
};
<!--index.html-->
<div id="popover" ng-show="hidePopover.show">
<div class="form-group">
<label>New Title</label>
<input type="text" ng-model="event.title" class="form-control" />
<label>New Attribute 1</label>
<input type="text" ng-model="event.attribute1" class="form-control" />
<label>New Attribute 2</label>
<input type="text" ng-model="event.attribute2" class="form-control" />
</div>
</div>
<div id="new_div" ng-show="hidePopover.hide"></div>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.rating {
color: #a9a9a9;
margin: 0;
padding: 0;
}
ul.rating {
display: inline-block;
}
.rating li {
list-style-type: none;
display: inline-block;
padding: 1px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.rating .filled {
color: red;
}
</style>
</head>
<body ng-app="starApp">
<div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
{{rating.max}}
<div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div>
</span>
</div>
<script>
var starApp = angular.module('starApp', []);
starApp.controller('StarCtrl', ['$scope', function ($scope) {
$scope.rating = 0;
$scope.ratings = [{
current: 5,
max: 10
}];
$scope.getSelectedRating = function (rating) {
console.log(rating);
}
}]);
starApp.directive('starRating', function () {
return {
restrict: 'A',
template: '<ul class="rating">' +
'<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
'\u2605' +
'</li>' +
'</ul>',
scope: {
ratingValue: '=',
max: '=',
onRatingSelected: '&'
},
link: function (scope, elem, attrs) {
var updateStars = function () {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.ratingValue
});
}
};
scope.toggle = function (index) {
scope.ratingValue = index + 1;
scope.onRatingSelected({
rating: index + 1
});
};
scope.$watch('ratingValue', function (oldVal, newVal) {
if (newVal) {
updateStars();
}
});
}
}
});
</script>
</body>
</html>
I want to use this star rating directive but I am clueless about how to use get and post using ng-resource so that i can fetch and push the selected values in my json file.
Also I want to ask that what's the benefit of using this instead of scope?
Thanks in advance.
Your issue was that your callback function on your controller wasn't triggered.
You can modify this as shown below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.rating {
color: #a9a9a9;
margin: 0;
padding: 0;
}
ul.rating {
display: inline-block;
}
.rating li {
list-style-type: none;
display: inline-block;
padding: 1px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.rating .filled {
color: red;
}
</style>
</head>
<body ng-app="starApp">
<div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
{{rating.max}}
<div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating"></div>
</span>
</div>
<script>
var starApp = angular.module('starApp', []);
starApp.controller('StarCtrl', ['$scope', function ($scope) {
$scope.rating = 0;
$scope.ratings = [{
current: 5,
max: 10
}];
$scope.getSelectedRating = function (rating) {
console.log(rating);
}
}]);
starApp.directive('starRating', function () {
return {
restrict: 'A',
template: '<ul class="rating">' +
'<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
'\u2605' +
'</li>' +
'</ul>',
scope: {
ratingValue: '=',
max: '=',
onRatingSelected: '&'
},
link: function (scope, elem, attrs) {
var updateStars = function () {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.ratingValue
});
}
};
scope.toggle = function (index) {
scope.ratingValue = index + 1;
//console.log(scope.onRatingSelected);
scope.onRatingSelected()(index + 1);
};
scope.$watch('ratingValue', function (oldVal, newVal) {
if (newVal) {
updateStars();
}
});
}
}
});
</script>
</body>
</html>
Honestly I don't know why it works... :/
There is a plunk which shows another way to do this: http://plnkr.co/edit/2mrW4SfRrI0qng7ORF0i
I have a little problem in configuring the mistake in my code.
I have written index.html which includes the template, and a jscript file which includes the model, collection and view.
please let me know where i am doing wrong. I particularly doubt whether i am using el tag wrongly.. or is it wrong in fetching the json data or in render function.
index.php
<head>
<meta charset="utf-8">
<title>Backbone.js News List</title>
<link rel="stylesheet" href="newsList.css"/>
</head>
<body>
<script src="../../test/vendor/json2.js"></script>
<script src="../../test/vendor/jquery.js"></script>
<script src="../../test/vendor/underscore.js"></script>
<script src="../../backbone.js"></script>
<script src="newsList.js"></script>
<header>
<h1 id="center_text">News List</h1>
</header>
<h2>News Trending</h2>
<div id="news-list"></div>
<div id="footer">
<h3 id="center_text" >Copy Right</h3>
</div>
<!-- Templates -->
<script type="text/template" id="item-template">
<div class="container" id="news">
<img id="img" src = <%- img %> >
<section>
<b id="title" ><%- title %> </b>
<br><%- snippet %>
<p><small id ="date"> <%- date%> </small></p>
</section>
</div>
</script>
</body>
</html>
JavaScript code
newsList.js
$(function(){
var NewsList = Backbone.Model.extend({
// Default attributes for the todo item.
defaults: {
id:"",
title: "empty NewsList...",
img:"",
snippet:"",
date:""
},
initialize: function(){
console.log("model initialized");
}
});
var NewsListColln = Backbone.Collection.extend({
// Reference to this collection's model.
model: NewsList,
url: 'http://api.divum.in/training/json/newslist.php',
initialize: function(){
console.log("colln initialized");
}
});
//VIEW
// The DOM element for a news item...
var NewsListView = Backbone.View.extend({
//... is a list tag.
el:"#news-list",
template: _.template($('#item-template').html()),
initialize: function() {
console.log("in view");
this.render;
},
render: function(eventName) {
console.log("in render");
var n = newsLists.content;
$.each(n.news, function(newslist){
var newsTemplate= this.template(newslist.toJson());
$(this.el).append(newsTemplate);
}, this);
return this;
}
});
var AppView = Backbone.View.extend({
el: "body",
initialize: function() {
var newsLists = new NewsListcolln();
var newsView = new NewsListView({model: newsLists});
newsLists.bind('reset', function () { newsView.render();});
newsLists.fetch();
}
});
var App = new AppView();
/* var newsLists = new NewsListColln;
var newsListView = new NewsListView({model: newsLists});
newsLists.fetch({ url: "http://api.divum.in/training/json/newslist.php", success: function() {
console.log(newsLists);
}});
newsLists.bind('reset', function () { newsListView.render(); });*/
/*
render:function(){
this.$("news-list").append(newsView.render().el);
}*/
});
css-- newsList.css file
body {
padding:0px;
margin: 0px;
background-color: black;
color:white;
}
h1 {
padding:5px;
margin: 0;
background-color: #FFFF00;
color:black;`enter code here`
}
h3{
margin: 0;
background-color:#FFFF00;
color:black;
}
h2{
padding:5px;
margin:0px;
background-color: white;
color:black;
}
.container {
color:white;
}
div img {
float: left;
width: 128px;
height:: 85%;
}
.container section{
margin-left:128px;
}
#footer{
position: fixed;
width: 100%;
bottom: 0px;
}
#center_text{
text-align:center;
}
#left_text{
text-align:left;
}
div p{
text-align: right;
}
.clearfix{
overflow: auto;
}
Errors:
The site returns a object, but collections are arrays. You need to use the models in this case.
render is a function, so you have to call it: this.render();
After passing a model to a view, access it via this.model.
A model needs either a url or a urlRoot set if you want to fetch it seperately
fetch is asynchronous you have to wait until it finishes.
Use .get() to access model properties
Working code: http://jsfiddle.net/FHsrL/1/