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>
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars">
            <div class="navbar">
            <div class="navbar-inner">
                <a class="brand" href="#">Pipeline &amp; Team Generator</a>
                <ul class="nav">
                    <li>
                        {{#link-to 'twod'}}2D Pipeline{{/link-to}}
                    </li>
                    <li>
                        {{#link-to 'threed'}}3D Pipeline{{/link-to}}
                    </li>
                </ul>
            </div>
        </div>
        {{outlet}}
   </script>
  
  <script type="text/x-handlebars" id="twod">
        <div class="row">
            <div class="span4">
                <img src="/img/2DPipeline.jpg" />
            </div>
​
            <div class="span4">
                <h4>2D Roles</h4>
                
       {{view Ember.Select
       contentBinding="designations"
       optionValuePath="content.id"
       optionLabelPath="content.designation"
       selectionBinding="selectedDesignation"
       prompt="Please Select a Role"}}  
        {{view Ember.Select
            contentBinding="experience"
            optionValuePath="content.exp"
            optionLabelPath="content.exp"
            selectionBinding="selectedExperience"
            prompt="Please Select Experience"}}
​
       
          </div>
            
            <div class="span3">
                <h4>People with Roles</h4>
                {{input type="text" value=searchText placeholder="Search"}}
             <div class="row">
                
                 <div class="span2">    
                        <ul>
                            
                            {{#each item in filteredContent}}
                                <li>{{#link-to 'twoduser' item}}{{item.firstname}}&nbsp;{{item.lastname}} {{/link-to}}</li>
                                {{else}}
                                 <p class="empty">No content</p>
                            {{/each}}
                                
                        </ul>
                    </div>
                    <div class="row">
                        <div class="span3">
                            {{outlet}}
                        </div>
                    </div>
                </div>
        </div>
        </div>
  </script>
  
  
  <script type="text/x-handlebars" id="threed">
        <div class="row">
            <div class="span4">
                <img src="/img/2DPipeline.jpg" />
            </div>
​
            <div class="span4">
                <h4>3D Roles</h4>
                    {{view Ember.Select
       contentBinding="designations"
       optionValuePath="content.id"
       optionLabelPath="content.designation"
       selectionBinding="selectedDesignation"
       prompt="Please Select a Role"}}
       {{view Ember.Select
       contentBinding="experience"
       optionValuePath="content.exp"
       optionLabelPath="content.exp"
       selectionBinding="selectedExperience"
       prompt="Please Select Experience"}}
       <br />
        
        
            </div>
            
            <div class="span3">
                <h4>People with Roles</h4>
                {{input type="text" value=searchText placeholder="Search"}}
             <div class="row">
                
                 <div class="span2">    
                        <ul>
                            
                            {{#each item in filteredContent}}
                                <li>{{#link-to 'threeduser' item}}{{item.firstname}}&nbsp;{{item.lastname}} {{/link-to}}</li>
                            {{/each}}   
                        </ul>
                    </div>
                    <div class="row">
                        <div class="span3">
                            {{outlet}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </script>
  
  <script type="text/x-handlebars" data-template-name="threeduser">
        <!-- more Info-->
        <div class="row">
            <div class="span3" id="moreinfo">
              <b>Full Name:</b> {{firstname}} {{lastname}}
              <br />
              <b>EMail:</b> {{email}}
              <br />
              Address: {{address}}
              <br />
              Phone: {{phone}}
              <br />
              Experience: {{experience}}
              <br />
              Designation: {{designation}}
            </div>
        </div>
        
        </script>
        <!--2D User -->
        <script type="text/x-handlebars" data-template-name="twoduser">
        <!-- more Info-->
        <div class="row">
            <div class="span3" id="moreinfo">
              <b>Full Name:</b> {{firstname}} {{lastname}}
              <br />
              <b>EMail:</b> {{email}}
              <br />
              Address: {{address}}
              <br />
              Phone: {{phone}}
              <br />
              Experience: {{experience}}
              <br />
              Designation: {{designation}}
            </div>
        </div>
        
        </script>
    
</body>
</html>
Output

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

Dismiss x
public
Bin info
kingpin2kpro
0viewers