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>
<head>
  
    <meta charset="ISO-8859-1">
    <title>Ember Test</title>
​
  <script src="http://www.follow-nature.com/jsfiddle/assets/js/jquery/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="http://www.follow-nature.com/jsfiddle/assets/js/jquery/jquery-ui-1.9.2.custom.js"></script>
    <script src="http://www.follow-nature.com/jsfiddle/assets/js/ember/handlebars-1.0.0.beta.6.js" type="text/javascript"></script>
    <script src="http://www.follow-nature.com/jsfiddle/assets/js/ember/ember-1.0.0-pre.2.js" type="text/javascript"></script>
​
</head>
<body>
​
    <script type="text/x-handlebars" data-template-name="application">
       {{outlet body}}
       {{outlet popup}}
    </script>
    
    <script type="text/x-handlebars" data-template-name="login">
        <div id="dialog" title="Login">
            <form {{action "login" on="submit" target="controller"}}>
                <div class="login-usernameLabel">Username:</div> {{view Ember.TextField class="login-usernameInput"}}
                <div class="login-passwordLabel">Password:</div> {{view Ember.TextField class="login-passwordInput" type="password"}}
                <button type="submit" class="login-loginButton">Login</button>
                <button type="button" class="login-cancelButton" {{action "cancel" on="click" target="controller"}}>Cancel</button>
            </form>
        </div>
    </script>
​
    <script type="text/x-handlebars" data-template-name="tabs">
        <div id="main_tabs">
            <ul>
                <li><a href="#tabs-1">Tab #1</a></li>
                <li><a href="#tabs-2">Tab #2</a></li>
            </ul>
            <div id="tabs-1">
                Tab #1 content goes here
            </div>
            <div id="tabs-2">
                {{view SN.Tab2View controllerBinding="SN.tab2Controller"}}
            </div>
        </div>
    </script>
​
    <script type="text/x-handlebars" data-template-name="Tab2">
        <br/>
        <button type="button" {{action addDocument target="controller"}}>Add New Document</button>
​
        <br/><br/>
        Tab #2 content goes here
    </script>
​
    <script type="text/x-handlebars" data-template-name="uploadDocument">
        <div id="dialog" title="Add New Document">
            <form {{action "onOK" on="submit" target="controller"}}>
                <div class="uploadDoc-titleLabel">Title:</div> {{view Ember.TextField class="uploadDoc-titleInput"}}
                <div class="uploadDoc-documentLabel">Document:</div> {{view Ember.TextField class="uploadDoc-documentInput"}}
                <button type="button" class="uploadDoc-selectButton" {{action "select" on="click" target="controller"}}>Select...</button> 
                <button type="submit" class="uploadDoc-uploadButton" {{action "upload" on="click" target="controller"}}>Add</button> 
                <button type="button" class="uploadDoc-cancelButton" {{action "cancel" on="click" target="controller"}}>Cancel</button> 
            </form> 
        </div>
    </script>
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
flexerpro
0viewers