Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
​
    <title>Ember.Select Test</title>
​
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.min.css">
    <link type="text/css" rel="stylesheet" href="style.css">
​
</head>
<body>
    <script type="text/x-handlebars">
        <div class="container">
            <h2>Login</h2>
            {{outlet}}
        </div>
    </script>
​
    <script type="text/x-handlebars" data-template-name='login'>
        <section class="main-login">
            <div class="row">
                <div class="col-md-12 main-panel">
​
                    <form role="form">                        
                        <div class="input-group">
                            <label for="company" class="input-group-addon ">Company:</label>
                            {{view Ember.Select 
                            class="form-control" 
                            content=companies 
                            optionValuePath="content.id"  
                            optionLabelPath="content.company" 
                            value="company_selid"
                            selectionBinding="company_selid"}}
​
                        </div>
​
                        <div class="input-group">
                            <label for="userName" class="input-group-addon">User Name:</label>
​
                            {{view Ember.Select
                            class="form-control"
                            content=users
                            optionValuePath="content.id"
                            optionLabelPath="content.userName"
                            value=user_selid
                            selection=user_selid
                            }}
​
                        </div>
                        <div class="input-group">
                            <label for="password" class="input-group-addon">Password:</label>
                            {{input type="text" value=passwordHash class="form-control"}}
                        </div>
                    </form>
​
                </div>
            </div>
​
            <div class="row">
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary" {{action 'login' }}>Login</button>
                </div>
            </div>
        </section>
​
        <div>
            --------------------
        </div>
        <div class="row">
            <div class="label-info">
                company-id: {{company_selid}}
            </div>
        </div>
        <div class="row">
            <div class="label-info">
                user-id: {{user_selid}}
            </div>
        </div>
    </script>
​
​
​
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
​
    <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.6.1/ember.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.8/ember-data.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ember-localstorage-adapter/0.3.1/localstorage_adapter.js"></script>
​
​
​
</body>
</html>
​
 
html, body {
    margin: 20px;
    color: #555;
}
​
a {
    text-decoration: none;
}
​
h2 {
    margin-bottom: 30px;
}
​
.container {
    width: 400px;
    margin: 30px auto 30px;
}
​
​
.main {
​
    border: 1px solid #222;
    background-color:#555555;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
}
​
.main-login {
​
    width: 300px;
    border: 1px solid #222;
    background-color:#555555;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
}
​
.ticket-preview {
    background-color:#555555;
    border-radius: 10px;
    margin-top: 0;
}
​
/* -----------in .main -----------------  */
​
​
.main-panel {
    float: left;
    color: red;
}
​
.right-panel {
    float: right;
}
​
​
/* ----------------------------  */
​
.secondary {
​
    border: 1px solid #222;
    background: #FFF;
    padding: 10px;
    border-radius: 10px;
}
​
.input-group {
    margin-bottom: 10px;
}
​
.input-group-addon {
    text-align: right;
    width: max-content;
    background-color:beige;
}
​
.nav-pills a:hover {
​
    color: #2a6496;
}
​
.nav-pills .title {
    color: green;
}
​
.nav-stacked a {
​
    color: white;
}
.nav-stacked.active {
    color: blue;
    
}
​
.active {
    background-color:#555555;
    border: 1px solid #222;
    color: #fff;
}
​
.active:hover {
    
    color: #fff !important;
}
​
.left {
    text-align: left;
}
​
.right{
    text-align: right;
}
​
.new {
    margin-top: 30px;
}
​
​
#company-list .active {
​
    font-weight: normal;
}
​
#people-list .active {
​
    font-weight: normal;
}
​
.list-group {
    border-radius: 10px !important;
    overflow: hidden;
    border: 0;
}
​
.dirty {
​
    color: red !important;
}
​
.notDirty {
​
    color: green !important;
}
​
.bold {
    font-weight: bold;
}
​
.center {
    text-align: center;
}
​
.white {
    color: white;
}
​
​
 
​
​
window.App = Ember.Application.create({
    LOG_TRANSITIONS: true, // basic logging of successful transitions
    LOG_TRANSITIONS_INTERNAL: true, // detailed logging of all routing steps
});
​
App.ApplicationStore = DS.Store.extend({
    adapter: 'App.ApplicationAdapter',
});
​
App.ApplicationAdapter = DS.RESTAdapter.extend({
    host: 'http://emberjs.azurewebsites.net',
    headers: {
        "Accept": "application/json",
    }
});
​
App.Company = DS.Model.extend({
    company: DS.attr('string')
});
​
App.User = DS.Model.extend({
    userName: DS.attr('string'),
    passwordHash: DS.attr('string'),
});
​
App.Router.map(function () {
    this.resource("login", { path: '/login' });
});
​
App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('login');
    },
});
​
App.LoginRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        var store = this.get('store');
        controller.set('companies', store.find('company'));
        controller.set('company_selid', 2);
        controller.set('users', store.find('user'));
        controller.set('user_selid', 3);
    },
});
​
App.LoginController = Ember.ObjectController.extend({
    companies: null,
    company_selid: '2',
    users: null,
    user_selid: '3',
    passwordHash: '',
    actions: {
        login: function () {
          alert('login clicked');
        },
    },
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Jason2014pro
0viewers