Ember.js model not showing after refresh

Ember.js model not showing after refresh - javascript

Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<p>{{#link-to 'mytest'}}My Test{{/link-to}}</p>
<p>{{#link-to 'posts'}}POSTS{{/link-to}}</p>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
<p>...</p>
</script>
<script type="text/x-handlebars" id="posts">
<ul>
{{#each model}}
<li>{{id}} -- {{#link-to 'post' this}}{{title}}{{/link-to}}</li>
{{/each}}
</ul>
<p>
{{outlet}}
</p>
</script>
<script type="text/x-handlebars" id="post">
<h1>{{title}}</h1>
<p>{{excerpt}}</p>
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.7.0.js"></script>
<script src="js/app.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
And here's my JS:
App = Ember.Application.create();
App.Router.map(function () {
this.resource('mytest');
this.resource('posts', function (){
this.resource('post', { path: ':post_id' });
});
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return posts;
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return posts.findBy('id', params.post_id);
}
});
var posts = [
{
'id': 1,
'title': 'first!',
'excerpt': 'firccccccccst!'
},
{
'id': 2,
'title': 'second!',
'excerpt': 'sssdsddsd!'
},
];
When I change this:
App.PostRoute = Ember.Route.extend({
model: function(params) {
return posts.findBy('id', params.post_id);
}
});
to this:
App.PostRoute = Ember.Route.extend({
model: function(params) {
return {
'id': 1,
'title': 'first!',
'excerpt': 'firccccccccst!'
}
}
});
it works.
What's wrong?

Related

Trello api invalid token

I have to make a work with the trello API, but I'm getting error 400 (invalid token) and I have no idea why.
This is my code (I have replaced my actual key with mykey)
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://trello.com/1/client.js?key=mykey"></script>
<script type="text/javascript">
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication"); },
error: function() { console.log("Failed authentication"); }
});
</script>
</html>

You should put all your code logic inside document.ready, so the entire document will be ready and then only you will get the popup for authentication / authorization. you can get a valid app key here : https://trello.com/app-key See the code example :
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
<div id="loggedin">
<div id="header">
Logged in to as <span id="fullName"></span>
</div>
<div id="output"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js?key=[appKeygoeshere]"></script>
<script type="text/javascript">
$(window).load(function(){
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication");
Trello.members.get("me", function(member){
$("#fullName").text(member.fullName);
var $cards = $("<div>")
.text("Loading Cards...")
.appendTo("#output");
// Output a list of all of the cards that the member
// is assigned to
Trello.get("members/senthil192/cards/all", function(cards) {
$cards.empty();
$.each(cards, function(ix, card) {
//alert(card.name);
$("<a>")
.attr({href: card.url, target: "trello"})
.addClass("card")
.text(card.name)
.appendTo($cards);
});
});
});
},
error: function() { console.log("Failed authentication"); }
});
});
</script>
</html>
code ref url : http://jsfiddle.net/danlec/nNesx/

Get selected button id in array using AngularJS

I am trying to get id's of selected buttons in an array from button-checkbox. I am able to successfully show the selected button's id in view but unable to get the selected ids in array form in controller.
Here is my HTML code
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(availability.services)" btn-checkbox >{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span></div>
</body>
</html>
and here is controller
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A',id:1 },
{ name:'Service B',id:2},
{ name:'Service C',id:3 },
{ name:'Service D',id:4}
];
$scope.availability = { services:services };
});
please see the plnker link
http://plnkr.co/edit/DeVPNug9APWWpwZByvnu?p=preview

Here you go:
$scope.getSelectedIDs = function() {
var ids = [];
angular.forEach($scope.availability.services, function(service) {
if (service.selected) {
ids.push(service.id);
}
})
return ids;
};
Now, just call the method $scope.getSelectedIDs() anywhere in your controller where you want the selected ids in array.
http://plnkr.co/edit/rS47sIEo1HaaDqrc3BUw?p=preview
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [{
name: 'Service A',
id: 1
}, {
name: 'Service B',
id: 2
}, {
name: 'Service C',
id: 3
}, {
name: 'Service D',
id: 4
}];
$scope.availability = {
services: services
};
$scope.getSelectedIDs = function() {
var ids = [];
angular.forEach($scope.availability.services, function(service) {
if (service.selected) {
ids.push(service.id);
}
})
return ids;
};
$scope.alertMeSelectedIDs = function() {
console.log($scope.getSelectedIDs());
alert($scope.getSelectedIDs());
};
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(availability.services)" btn-checkbox>{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span>
</div>
<br>
<a ng-click="alertMeSelectedIDs()">Show me selected</a>
</body>
</html>

I have forked the code: http://plnkr.co/edit/eQxsq194qqRUo8Vs326H?p=preview
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A',id:1 },
{ name:'Service B',id:2},
{ name:'Service C',id:3 },
{ name:'Service D',id:4}
];
$scope.availability = { services:services };
$scope.test = function (service){
console.log (service);
}
});
HTML
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(service)" btn-checkbox >{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span></div>
</body>

Not able to display view in Angular

Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?
index.html
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('KanbanBoard', ['ngRoute']);
(function () {
app.config(function ($routeProvider) {
$routeProvider.when("/boards", {
controller: "BoardsController",
templateUrl: "/app/boards/boardsView.html"
});
$routeProvider.otherwise({ redirectTo: "/boards" });
});
})();
controller.js
'use strict';
(function () {
app.controller('BoardsController', ['$scope', function ($scope) {
$scope.users;
this.users = [
{
id: 0,
email: 'a#a.com',
name: 'A',
surname: 'B',
initials: 'AB',
boards: [
{
id: 0,
title: 'Welcome Board',
description: 'Board sample',
isArchived: false,
},
{
id: 1,
title: 'Project X',
description: 'Project X description',
isArchived: false,
}
]
}
];
$scope = this.users;
}]);
})();
boardView.html
<div ng-controller="BoardsController as boardsCtrl">
<div ng-repeat="user in boardsCtrl.users">
{{user.name + " " + user.surname}}
<ul>
<li></li>
</ul>
</div>
</div>

In the body of your webpage it seems that you are missing ng-view:
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div> <!--this is required.-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
From the documentation:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

You missed adding the Boardview.html with controller on your index.html
It could be done inline or by using ng-include:
<div ng-include="boardView.html"></div>

ember.js - how to load custom route template?

In my code below I am trying to load the 'home' route template as my index route?
how do I do this? go to mysite.com then the home route template must load only?
I don't want to see the application template and use its {{outlet}}.
Thanks for your help
var App = Ember.Application.create();
App.Router.map(function(){
this.resource('home', {path: ''} );
//this.resource('home', {path: '/h'} );
this.resource('about', {path: '/a'} );
this.resource('contact', {path: '/c'} );
});
App.ApplicationRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('contact');
}
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('home');
}
});
App.HomeRoute = Ember.Route.extend({
});
App.AboutRoute = Ember.Route.extend({
});
App.ContactRoute = Ember.Route.extend({
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
</head>
<body>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.1.js"></script>
<script src="js/attempt1.js"></script>
<script type="text/x-handlebars">
<div>
page - Application
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="home">
<div>
page - Home
</div>
</script>
<script type="text/x-handlebars" id="about">
<div>
page - About
</div>
</script>
<script type="text/x-handlebars" id="contact">
<div>
page - Contact
</div>
</script>
</body>
</html>

change id for data-template-name :
<script type="text/x-handlebars" data-template-name="home">
<div>
page - Home
</div>
</script>

filter function in angular js not working

I've followed this basic AngularJS tutorial : https://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D
Everything went well until I added the clearCompleted() method. it does not seem to be working:
HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{getTotalTodos()}} </h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form class="form-horizontal">
<input type="text" ng-model="formTodoText" ng-model-instant>
<button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
</form>
<button class="btn-large" ng-click="clearCompletedTodos()">
Clear Completed
</button>
</div>
</body>
</html>
JS:
function TodoCtrl($scope) {
$scope.todos = [
{text: 'Learn Anagular', done:false},
{text: 'Build an app', done:false}
];
$scope.getTotalTodos = function() {
return $scope.todos.length;
};
$scope.addTodo = function() {
$scope.todos.push({text: $scope.formTodoText, done: false});
$scope.formTodoText = '';
};
$scope.clearCompletedTodos = function() {
$scope.todos = _.filter($scope.todos, function(todo) {
return !todo.done;
});
};
}
the "completed todos" are not getting removed .

Here is what I have done and it works for me:
Please notice that the follow lines has been changed (http:// added)
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
to the follow
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

I met the same problem, actually, write it like below, it works fine:
$scope.clearCompleted = function(){
$scope.todos = $scope.todos.filter(function(todo){
return !todo.done;
})
};

Actually none of those worked for me; I used this one.
var t = [];
angular.forEach($scope.todos, function (i)
{
if (!i.done)
t.push({text: i.text, done: i.done});
});
$scope.todos = t;

We Keep Coding

JavaScript is the programming language of the Web.

Ember.js model not showing after refresh - javascript

Related

Trello api invalid token

Get selected button id in array using AngularJS

Not able to display view in Angular

ember.js - how to load custom route template?

filter function in angular js not working

Categories

Resources