We Keep Coding

Angular lazy loaded component, only loading after refresh

I've got a dashboard component in a lazy loaded module.
In my signin component I have a button that navigates to the dashboard component via router.navigate.
However when I click the button, although it navigates to the correct route, it doesn't display the component. It only displays the app component.
However if I refresh the page it ends up loading. Driving me crazy.If i open up a new tab and go to that same route everything works fine. But it seems when I click the button which navigates via routerlink it doesn't load it.
sign-in.component.html
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button (click) = "authenticateUser()" class="btn btn-primary">Sign In</button>
</form>
<router-outlet></router-outlet>
sign-in.component.ts
import { Component, OnInit } from '#angular/core';
import {Router} from '#angular/router'
#Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
moduleId: module.id,
styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent implements OnInit {
constructor(private router:Router) { }
authenticateUser(){
//Make request to signin endpoint, if successful save profile details and navigate to dashboard
this.router.navigate(['/dashboard'])
}
ngOnInit() {
}
}
dashboard.component.ts
import { Component} from '#angular/core';
import Chart from 'chart.js';
#Component({
selector: 'dashboard-cmp',
moduleId: module.id,
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent{
constructor(){
}
}
app.component.html
<div *ngIf = "url=='/sign-up' || url =='/sign-in'">
<!-- <div class = "head">
<img class = "logo" src = "assets/img/quickList1.jpeg">
<app-sign-up></app-sign-up>
</div> -->
<div class = "my-container">
<div [ngStyle] = "{'height':url == '/sign-up' ? '500px' : '300px' }" class = "form-box">
<h1 style = "text-align:center;margin-top:12px;">QuickList {{url}}</h1>
<div class = "signForm">
<div *ngIf="url == '/sign-in'; else elseBlock"><app-sign-in></app-sign-in></div>
<ng-template #elseBlock><app-sign-up></app-sign-up></ng-template>
</div>
</div>
<div class = "alternate-box">
<div class = "prompt">
<div *ngIf="url == '/sign-in'; else loginPrompt">Don't have an account? <a routerLink = '/sign-up'>Sign up</a></div>
<ng-template #loginPrompt>Have an account? <a routerLink = '/sign-in'>Sign In</a></ng-template>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
app.routing.ts
import { Routes } from '#angular/router';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { TableComponent } from './pages/table/table.component';
import { EmailsFoundComponent } from './emails-found/emails-found.component';
import { AppComponent } from './app.component';
import { EmptyComponent } from './empty/empty.component';
export const AppRoutes: Routes = [
{
path: '',
redirectTo: 'sign-in',
pathMatch: 'full',
},
{
path:'sign-in',
component: EmptyComponent
},
{
path:'sign-up',
component: EmptyComponent
},
{
path: '',
component: AdminLayoutComponent,
children: [
{
path: '',
loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
}]},
]
lazy-loaded module routing
import { Routes } from '#angular/router';
import { DashboardComponent } from '../../pages/dashboard/dashboard.component';
import { UserComponent } from '../../pages/user/user.component';
import { TableComponent } from '../../pages/table/table.component';
import { TypographyComponent } from '../../pages/typography/typography.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { MapsComponent } from '../../pages/maps/maps.component';
import { NotificationsComponent } from '../../pages/notifications/notifications.component';
import { UpgradeComponent } from '../../pages/upgrade/upgrade.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'user', component: UserComponent },
{ path: 'maillists', component: TableComponent },
{ path: 'typography', component: TypographyComponent },
{ path: 'icons', component: IconsComponent },
{ path: 'emails-found', component: MapsComponent },
{ path: 'find-emails', component: NotificationsComponent },
{ path: 'upgrade', component: UpgradeComponent }
];
dashboard.component.html
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-body ">
<div class="row">
<div class="col-5 col-md-4">
<div class="icon-big text-center icon-warning">
<img src = "assets/img/hashtag.png">
</div>
</div>
<div class="col-7 col-md-8">
<div class="numbers">
<p class="card-category">Number of Mail Lists</p>
<p class="card-title">10
<p>
</div>
</div>
</div>
</div>
<div class="card-footer ">
<hr>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-body ">
<div class="row">
<div class="col-5 col-md-4">
<div class="icon-big text-center icon-warning">
<img src = "assets/img/at.png">
</div>
</div>
<div class="col-7 col-md-8">
<div class="numbers">
<p class="card-category">Total Number of Emails</p>
<p class="card-title">1,345
<p>
</div>
</div>
</div>
</div>
<div class="card-footer ">
<hr>
</div>
</div>
</div>
<!-- <div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-body ">
<div class="row">
<div class="col-5 col-md-4">
<div class="icon-big text-center icon-warning">
<i class="nc-icon nc-vector text-danger"></i>
</div>
</div>
<div class="col-7 col-md-8">
<div class="numbers">
<p class="card-category">Errors</p>
<p class="card-title">23
<p>
</div>
</div>
</div>
</div>
<div class="card-footer ">
<hr>
<div class="stats">
<i class="fa fa-clock-o"></i> In the last hour
</div>
</div>
</div>
</div> -->
<div>
<div class="card card-stats">
</div>
</div>
</div>
<!-- <div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header ">
<h5 class="card-title">Users Behavior</h5>
<p class="card-category">24 Hours performance</p>
</div>
<div class="card-body ">
<canvas id=chartHours width="400" height="100"></canvas>
</div>
<div class="card-footer ">
<hr>
<div class="stats">
<i class="fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div> -->
<div class="row">
<div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%" class="col-md-5">
<div class="card ">
<div class="card-header ">
<h5 class="card-title"><i class="nc-icon nc-bullet-list-67"></i> Manage your mailing lists</h5>
<p class="card-category">Create, delete, add emails etc</p>
</div>
<div class="card-body ">
<ul>
<li>Insurance Companies</li>
<li>Medical Companies</li>
<li>Fin Tech</li>
<li>Web Dev</li>
<li>Accounting</li>
<li>Law Firms</li>
</ul>
</div>
<div class="card-footer ">
<p>Recently created lists.</p>
<!-- <div class="legend">
<i class="fa fa-circle text-primary"></i> Opened
<i class="fa fa-circle text-warning"></i> Read
<i class="fa fa-circle text-danger"></i> Deleted
<i class="fa fa-circle text-gray"></i> Unopened
</div> -->
<hr>
<!-- <div class="stats">
<i class="fa fa-calendar"></i> Number of emails sent
</div> -->
</div>
</div>
</div>
<div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%;" class="col-md-5">
<div class="card ">
<div class="card-header ">
<h5 class="card-title"><i class="nc-icon nc-zoom-split text-success"></i> Find Emails</h5>
<p class="card-category">Reach your target audience using search!</p>
</div>
<div class="card-body ">
<ul>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
</ul>
</div>
<div class="card-footer ">
<p>Recently generated emails</p>
<hr>
<!-- <div class="stats">
<i class="fa fa-calendar"></i> Number of emails sent
</div> -->
</div>
</div>
<typography-cmp></typography-cmp>
<router-outlet></router-outlet>

How to hide panel and navbar in login page framework7

I'd like to hide correctly the panel and the navbar only in the login page. After login I'd like to show them. I achieve this task partially, because my code has a bad side effect. When I open the app I saw my login page but for few second the navbar appears and then disappears. I'd like to access on login page without this effect. I'd like to see immediatly the login page without them.
How can I solve it?
I declared them in my index.html
<div id="app">
<div class="panel panel-left panel-cover">
<div class="navbar color-theme-green ">
<div class="navbar-inner sliding">
<div class="title">Menu</div>
</div>
</div>
<div class="block">
<div class="list links-list">
<ul>
<li>
<a href="/home/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">graph_square</i>
<i class="material-icons md-only">dashboard</i>
</div>
<div class="item-inner">
<div class="item-title">Home</div>
</div>
</div>
</a>
</li>
<li id="company" style="display:none;">
<a href="/company/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Top Navbar -->
<div class="navbar color-theme-green">
<div class="navbar-inner sliding">
<div class="left">
<a class="link panel-open">
<i class="f7-icons ios-only">menu</i>
<i class="material-icons md-only">menu</i>
<!--<span class="ios-only">Back</span>-->
</a>
<a class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">My app</div>
</div>
</div>
<div class="view view-main"></div>
This is my config file app.js where I show and hide the elements on pageInitEvent
var $$ = Dom7;
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'myApp',
// App id
id: 'it.myapp.myApp',
theme: 'auto',
version: '0.0.1',
cacheDuration: 0,
cache: false,
stackPages: true,
preloadPreviousPage: true,
panel: {
swipe: 'right',
swipeNoFollow: true
},
/**
* Routes
*/
routes: [
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
page.router.clearPreviousHistory();
}
},
},
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
}
},
}
}
And finally this is my login.html page where I put no-navbar in orderd to hide it.
<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
<!-- Login form -->
<form id="form-login">
<div class="row justify-content-center">
<div class="col-100 tablet-80 desktop-50">
<div class="card head-card-forest">
<div class="card-header">
<span></span><h2>Login</h2><span></span>
</div>
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Username">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<div class="row">
<a class="col button button-fill" id="button-login" onclick="getLogin()"> Accedi </a>
</div>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--.card-->
</div><!--.col-->
</div><!--.row-->
</form>
</div> <!-- ./ page-content -->

Best thing is hide navbar before init or while its mounted
You can try these two
1:Beforeinit
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageBeforeIn: function(){
app.navbar.hide('.navbar');
}
},
}
2:When its injected to DOM an
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageMounted: function(){
app.navbar.hide('.navbar');
}
},
}
pageInit will be triggered once required components and navbar is loaded

you can hide the panel in the login page using pageInit event
pageInit : function (e,p) { p.app.panel.left.hide() }

How to hide a div with angular js ng-hide

I have a page with a div which contains a jumbotron, this is the first page that is display anytime the site is accessed. On this page I have some links which link to different pages using the '$routeProvide'/angular. I want to hide the jumbotron from the other links/pages but I am not sure how to do that.
main page :
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header col-md-12 col-sm-12 logo">
<img src="img/gilgal.png" class="img-responsive center-block" alt="Responsive image">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="container-fluid col-md-9 col-sm-12 hidden-xs col-md-offset-2">
<ul class="nav navbar-nav" id="navbar">
<li class="navlink">About Us</li>
<li class="navlink">Advisory Service</li>
<li class="navlink">Investment Service</li>
<li class="navlink">Infrastructure Development</li>
<li class="navlink">Contact</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="jumbotron" ng-hide="hideme">
<div class="container-fluid">
<div class="row jumb">
<div class="col-md-4 col-md-offset-1 head-card">
<h4 class="head-text">ADVISORY SERVICES</h4>
<p class="head-desc">We provide Corporate Finance Advisory Services for private and public institutions in Sub-Saharan Africa</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 head-card">
<h4 class="head-text">INVESTMENT MANAGEMENT SERVICES</h4>
<p class="head-desc">We focus on Real Estate and Infrastructural Projects in Sub-Saharan Africa</p>
</div>
</div>
</div>
</div>
<div ng-view>
</div>
<div class="container-fluid col-md-12 foot">
<p class="col-md-offset-1">All content copyright of Gilgal Capital Limited 2015 | Branding and Website by Ashebby</p>
</div>
<!-- Angular Route.js -->
<script src="js/angular-route.min.js"></script>
<!-- Angular.js -->
<script src="js/angular.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</div>
</body>
here is my script.js
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl: 'index.html'
})
.when('/about',{
templateUrl: 'about.html'
})
.when('/advService',{
templateUrl: 'advService.html'
})
.when('/imService',{
templateUrl: 'imService.html'
})
.when('/greService',{
templateUrl: 'greService.html'
})
.when('/contact',{
templateUrl: 'contact.html'
});
});
app.controller('cfgController'['$Scope', function($scope) {
$Scope.hideme = false;
$Scope.$on('$locationChangeStart', function(event) {
$scope.hideme = true;
});
}]);
here is a typical link to a different page about.html :
<div class="container-fluid col-md-12 about-us">
<div class="about-us col-md-offset-1">
<h2 class="col-md-10">
<span class="title2">About Us</span>
<div class="line"></div>
</h2>
<p class="col-md-10 article">text</p>
</div>
</div>

Is that really hard... So ng-hide is easy to use
To hide a div just do this :
<div ng-hide="hideme">your content </div>
and in your controller you define hideme variable like this :
$scope.hideme = true; // true to hide ,false to show
Edit: So in your case do this :
<li class="navlink"><a ng-click="hideIt()" href="#/about">About Us</a></li>
In your controler make a fucntion hideIt to hide the jumbotron div :
$scope.hideIt = function(){
$scope.hideme = true;
}

app.run(['$rootScope', function($rootScope) {
$rootScope.hideme = false;
$rootScope.$on('$routeChangeStart', function(){
$rootScope.hideme = true;
});
Along with your code, just add this run block. It should work.

How to View Different JSP Files by Clicking Different Tabs

Firstly I am very beginner at angular.js.
I have 3 jsp file. main.jsp, list.jsp and new.jsp.
I can view them from different urls but I want to combine them tabs in main.jsp. So I tried below but I couldn't success. I want to show them new.jsp and list.jsp files under tabs.
My main.jsp
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span10">
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul class="nav nav-tabs content-tab-header" id="content_tab_0">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
</ul>
</div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<!-- content ends -->
</div><!--/#content.span10-->
<script>
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'list.brands',
url: '/admin.brands/list',
cssClass: 'icon-th-list'
}, {
title: 'add.brand',
url: '/admin.brands/new',
cssClass: 'icon-plus'
}];
$scope.currentTab = '/admin.brands/list';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
</script>
list.jsp. Note that list.jsp has own controller.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span10">
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-app="MyApp" ng-controller="PostsCtrl">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="post in posts | filter:search">
<td>{{post.brandid}}</td>
<td>{{post.name}}</td>
<td>{{post.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/edit?brandid={{post.brandid}}" ><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{post.brandid}}" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost/admin.brands/getJSONDataOfSearch').
success(function(data, status, headers, config) {
$scope.posts = data;
}).
error(function(data, status, headers, config) {
});
});
</script>
new.jsp
<div class="row-fluid sortable">
<div class="box span12">
<%-- <div class="box-header" data-original-title>
<h2>
<i class="glyphicon glyphicon-info-sign"></i>
<tags:label text="new.brand"/></h2>
</div> --%>
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal">
<fields:form formName="brand.form" >
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<fields:field name="name" cssClass="validate[required]"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<fields:field name="isactive" value="1"/>
</div>
</div>
<div class="section-heading"><tags:label text="logo"/></div>
<div class="control-group">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button type="submit" class="btn btn-ext-lightblue btn-modal-trigger"><tags:label text="save"/></button>
</div>
</fields:form>
</form>
</div>
</div>

Ember Data isn't seeing my local store

Full Disclosure: I am new to Ember.
I have an app that I have started where when the user clicks on the next button, they create an instance of the customer model and that model is saved to local storage. On the next page, I want both the first and last name to pre-populate the text inputs. I have tried to follow the intro video but I have run into a problem. It appears that I am creating the object and then storing it successfully in local storage, but when the user transitions to the next page, the model can't be found. Here is my code:
HTML:
<script type="text/x-handlebars">
<div class="navbar navbar-inverse navbar-fixed-top">
<div id="nobox" class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
</div>
<div class="container">
{{outlet}}
<footer>
</footer>
</div>
</body>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<!--<div class="progress-bar-label-div">
Progress:
</div>
<div class="progress-bar-div">
<div class="progress progress-striped">
<div class="bar" style="width:60%;"></div>
</div>
</div>-->
<div class="btn-group pull-right">
<a class="btn btn-primary" id="captcha" {{action 'create'}}>
Next
</a>
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left" >
<h3 class="purple">To start the process, please fill out the captcha below</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left questions">
</div>
</div>
</div>
</div>
<hr>
</script>
<script type="text/x-handlebars" data-template-name="customer">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<div class="btn-group pull-right">
{{#linkTo 'wsnum' action="create" classNames="btn btn-primary"}}Next{{/linkTo}}
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left">
<h3>Customer Information</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="row top">
<div class="pull-left">
<span class="red">*</span> = Denotes required field
</div>
<div class="pull-right form-inputs input-text">
</div>
</div>
<br>
<div class="row-b">
<div class="control-group">
<label class="control-label" for="inputfname">First Name<span class="red">*</span>:</label>
<div class="controls">
{{view Ember.TextField valueBinding='model.first'}}
</div>
</div>
</div>
<div class="row-a">
<div class="control-group">
<label class="control-label" for="inputlname">Last Name<span class="red">*</span>:</label>
<div class="controls">
{{view Ember.TextField valueBinding='model.last'}}
</div>
</div>
</div>
</div>
<input type="hidden" name="prev" value="">
<hr>
</script>
<script type="text/x-handlebars" data-template-name="wsnum">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<!--<div class="progress-bar-label-div">
Progress:
</div>
<div class="progress-bar-div">
<div class="progress progress-striped">
<div class="bar" style="width:60%;"></div>
</div>
</div>-->
<div class="btn-group pull-right">
<!--<a class="btn" href="">
Prev
</a>
<a class="btn btn-primary" id="captcha">
Next
</a>-->
{{#linkTo 'customer' classNames="btn btn-primary"}}Prev{{/linkTo}}
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left" >
<h3>Choose the Number of Workstations or Point of Sale Accessories only</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left additional-questions">
How many workstations will you need?
</div>
<div class="pull-right input-text-well">
</div>
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left additional-questions">
Request Point of Sale Accessories only
</div>
<div class="pull-right radio-wsnum">
<label class="checkbox inline radio-new-pos">
<input type="checkbox" id="posonly1" name="posonly1" value="pos"> POS only
</label>
</div>
</div>
</div>
</div>
<hr>
</script>
<script type="text/x-handlebars" data-template-name="overview">
</script>
<script type="text/x-handlebars" data-template-name="new">
</script>
<script type="text/x-handlebars" data-template-name="existing">
</script>
And my app.js:
App = Ember.Application.create();
App.store = DS.Store.create({
revision: 12,
adapter: DS.LSAdapter.extend()
});
App.Router.map(function() {
// put your routes here
this.route("customer", { path: "/customer" });
this.route("wsnum", {path: "/wsnum"});
});
App.IndexRoute = Ember.Route.extend({
});
App.IndexController = Ember.Controller.extend({
create: function(){
var customer = App.Customer.createRecord({
first:"ron",
last:"testing"
});
console.log('Before the save');
customer.save();
console.log(customer.get('first'));
this.transitionToRoute('customer');
}
});
App.CustomerRoute = Ember.Route.extend({
model: function() {
var customer = App.Customer.find();
console.log(customer.get('first'));
return customer;
}
});
App.WsnumRoute = Ember.Route.extend({
});
var attr = DS.attr;
App.Customer = DS.Model.extend({
first: attr('string'),
last: attr('string')
});
Here is a working example. Any ideas?

In App.CustomerRoute.model(), this line:
var customer = App.Customer.find();
sets the customer variable is being set to result of find(). find() returns an array of all customer records. So when you call get('first') on the array it is undefined, since the array of customers does not have a property first.
Also, the route
this.route("customer", { path: "/customer" });
should probably be:
this.route("customer", { path: "/customer/:customer_id" });
since it seems to be for displaying one customer not a list of them.
With that change, CustomerRoute is not really needed at all. So app looks like:
App = Ember.Application.create();
App.store = DS.Store.create({
revision: 12,
adapter: DS.LSAdapter.extend()
});
App.Router.map(function() {
this.route("customer", { path: "/customer/:customer_id" });
this.route("wsnum", {path: "/wsnum"});
});
App.IndexController = Ember.Controller.extend({
create: function(){
var controller = this;
var customer = App.Customer.createRecord({
first:"ron",
last:"harmon"
});
customer.save().then(function() {
controller.transitionTo('customer', customer);
});
}
});
var attr = DS.attr;
App.Customer = DS.Model.extend({
first: attr('string'),
last: attr('string')
});
Working example here: http://jsbin.com/itogeh/1/edit