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
Related
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() }
I'm a beginner with framework 7. I'm developing a little app and I split the html code in different files because i have a lot of pages with div in common. My problem is: I have a page.html, inside my page.html I'd like to include different div in the same windows from different html files.
for example in php we can do it with a
include("");
but in framework7 I can include only one with
<div class="view view-main view-init" data-url="/page/" data-name="page"></div>
I'd like to include more one view like this
<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>
i put an image here to explain me better.
what i'd like to do
Thank you for your help.
pages.html
<div data-name="pages" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-80">
<div class="block">
<form class="list" id="pages1">
<div class="row justify-content-center">
<div class="block-title">
<h1> Pages</h1>
</div> <!--block-title-->
</div><!--row-->
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card 1</h2>
</div>
<div class="card">
<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">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<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">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
Here I'd like to include the code inside pages1.html
Here I'd like to include the code inside pages2.html
</form>
</div><!--block-->
<div class="block">
<a class="col button button-fill" href="#">Salva</a>
</div>
</div><!--col-100-->
</div><!--row-->
</div> <!-- ./ page-content-->
pages1.html
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card2</h2>
</div>
<div class="card">
<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">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<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">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
To include Multiple Views Layout you need to do this:
You need to create wrapper with class views like this: <div class="views tabs">
You need to create div view like this: <div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
You need to make sure thats only one views class wrapper.
In Js: You can control multiple views by this:
var view1 = app.views.create('#view-1', {...});
var view2 = app.views.create('#view-2', {...});
For more details: F7 View
For Embedded Multi view not like tab:
Example
Note: for each view in F7 is got 100% height...you need to make sure thats height is equal 100% finally
EDIT: After a long investigation, I found from the documentation that you can do it like this:
<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
...
</div>
And in your routers, will need to define your route as well:
var app = new Framework7({
root: '#app',
// Create routes for all pages
routes: [
{
path: '/',
url: 'index.html',
},{
// Add your contents page route
path: '/your-page/',
url: 'pages/your-page.html',
},
.....
});
Hope this help.
I've got a router setup like this:
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get("$state");
$state.go('app');
});
$stateProvider
.state('app', {
templateUrl: 'index.html',
controller: 'AppCtrl',
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('shared');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['ui-bs-paging', 'ui-bs-modal']).then(
function() {
return $ocLazyLoad.load(['app/shared/controllers/AppCtrl.js']);
}
);
}
]
}
.state('app.shares', {
url: "/shares",
templateUrl: "app/modules/shares/views/shares.html",
controller: 'ShareCtrl',
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('modules/shares');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['ShareServiceModule']).then(
function() {
return $ocLazyLoad.load(['app/modules/shares/controllers/ShareCtrl.js']);
}
);
}
]
}
})
});
And on my index is like:
<div id="page-content-wrapper">
<div class="row header" id="header">
<div class="col-xs-6">
<a href="##">
<img class="svg-1 pull-left" src="assets/img/header_logo.svg" alt="Pwc">
</a>
<i class="separator pull-left"></i>
<h1 class="header-text pull-left"> Sustainability Tool </h1>
</div>
<div class="col-xs-6">
<button type="button" ng-class="hamburger" class="hamburger animated fadeInLeft" data-toggle="offcanvas" ng-click="sidebarClick()"><span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span></button>
</div>
</div>
<!-- main app content ui-view include -->
<div ui-view data-anim-sync="true" class="anim-in-out anim-slide-below-fade" data-anim-speed="500">
<div class="home">
<section class="banner">
<img src="assets/img/home_hero.jpg">
</section>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>{{'pwc.sus.home.intro.title.label' | translate}}</h1>
</div>
<div class="col-md-12">
<h2>{{'pwc.sus.home.intro.subtitle.label' | translate}}</h2>
</div>
<div class="col-md-4 col-md-offset-4">
<p>{{'pwc.sus.home.intro.description.label' | translate}}</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>
<h1>{{'pwc.sus.home.features.title.label' | translate}}</h1>
</h1>
<p>
<h1>{{'pwc.sus.home.features.title.label' | translate}}</h1>
</p>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="footer section">
<div class="row disclaimer">
<div class="col-xs-6">
<span class="footer-text footer-text-hack">© PwC, 2016. All Rights Reserved.</span>
</div>
<div class="col-xs-6">
<span class="pull-right footer-text"> Legal Disclaimer </span>
</div>
</div>
</div>
</div>
The router is working correctly but the header and all the footer content are duplicated like this (repeated ui-view):
Can someone help this Angular newbie? Tnks.
I am making an webapp to add image in MongoDB using image url. But when I'm using userFilter using Session it is not working and anything related Session are not working.
I have already use command "meteor add session " but again its not working
my start.js code is:
Images=new Mongo.Collection("images");
if(Meteor.isClient) {
Session.set("imageLimit",8);
$(window).scroll(function(event){
console.log(new Date());
})
Template.images.helpers({
images:function(){
if(Session.get("userFilter")){
return Images.find({createBy:Session.get("userFilter")},{sort: {date:-1,rating:-1}});
} else {
return Images.find({},{sort:{date:-1,rating:-1}});
}
},
getUser:function(user_id){
var user=Meteor.users.findOne({_id:user_id});
if(user) {
return user.username;
} else {
return "none"
}
}
});
Template.body.helpers({
username:function(){
if(Meteor.user()) {
return Meteor.user().username;
// return Meteor.user().emails[0].address;
} else {
return "";
}
}
});
Template.images.events({
'click .js-image':function(event){
$(event.target).css("width","50px");
},
'click .btn-del':function(event){
var id=this._id;
$("#"+id).hide('slow',function(){
Images.remove({"_id":id});
});
},
'click .js-rate':function(event){
var rating=$(event.currentTarget).data("userrating");
console.log(rating);
var image_id=this.id;
Images.update({_id:image_id},{$set:{rating:rating}});
},
'click .js-form-show':function(event){
$("#add-form").modal('show');
},
'click .js-click-name':function(event){
Session.set("userFilter",this.createBy);
}
});
Template.img_text.events({
'submit .js-form':function(event){
var img_src,img_alt;
img_src=event.target.img_src.value;
img_alt=event.target.img_alt.value;
Images.insert({
img_src:img_src,
img_alt:img_alt,
date:new Date(),
createBy:Meteor.user()._id
});
return false;
},
});
}
my html code is:
<head>
<title>Meteor JS</title>
</head>
<body>
{{> img_text}}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
{{> loginButtons}}
</div>
</nav>
<div class="container">
<h1>Welcome to mySite {{username}}!</h1>
{{> images}}
</div>
</body>
<template name="img_text">
<div class="modal fade" id="add-form">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<h2>Image Form</h2>
</div>
</div>
<div class="modal-body">
<form class="js-form">
<input type="text" name="img_src">
<br/><input type="text" name="img_alt">
<button class="btn btn-success" >Submit</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal" >cancel</button>
</div>
</div>
</div>
</div>
</template>
<template name="images">
{{#if currentUser }}
<div id="btn">
<button class="btn btn-success js-form-show" >Add Image</button>
</div>
{{/if}}
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3" id="{{_id}}">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}" alt="{{img_alt}}"/>
<div class="caption">
<h3>Rating : {{rating}}</h3>
<p>{{img_alt}}</p>
<p>
User:
{{getUser createBy}}</p>
<p>
{{>starsRating mutable=true class="js-rate" id=_id}}
</p>
<button class="btn-del btn btn-warning">delete</button>
</div>
</div>
</div>
{{/each}}
</div>
</template>
This is my Accordion, How can I expand "systemAccordion" automatically when its parent Configuration is expanded
<div spry:region="mainData">
<div class="Accordion" id="mainAccordion" tabindex="0">
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/healthicon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showHealthCheckSpan();"><img align="left" src="/csm/include/images/healthicon.gif">Health Check</a></div>
</div>
<div class="AccordionPanel"><!-- <img align="left" src="/csm/include/images/conficon.gif"> -->
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();"><img align="left" src="/csm/include/images/conficon.gif">Configuration</a></div>
<div class="AccordionPanelContent">
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">System</a></div>
<div class="AccordionPanelContent">
<a onClick="showKernelParamSpan();">Kernel Parameters</a><br/>
<a onClick="showDiskSpan();">Disk Usage</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> {mainData::#product}</div>
<div class="AccordionPanelContent">
<span id='selectodbc'><a onClick="showOdbcSpan();">ODBC</a></span><br/>
<span id='selectbitmode'><a onClick="showBitmodeSpan();">Bitmode</a></span><br/>
<br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
<script type="text/javascript">
var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
</div>
Got the answer, When we define the accordion we have a choice like below
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: 0, useFixedPanelHeights: false });
</script>
Solved my problem.