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="utf-8">
  <title>JS Bin</title>
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//builds.emberjs.com/tags/v1.11.0-beta.5/ember.debug.js"></script>
  <script src="//builds.emberjs.com/tags/v1.11.0-beta.5/ember-template-compiler.js"></script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="test-template">  
  Hello World
  <input type="button" {{action "buttonOneClick" target=view}} name="buttonOne" id="buttonOne" value="Load Container" />
  {{view "mainContainer" viewName="mainContainer"}}
  </script>
  <script type="text/x-handlebars" data-template-name="container-object">  
  <p>Container Object</p>
  </script>
  <script type="text/x-handlebars" data-template-name="second-action-template">  
  <input type="button" {{action "buttonTwoClick" target=view}} name="buttonTwo" id="buttonTwo" value="Move Container" />
  </script>
</body>
</html>
 
App = Ember.Application.create();
App.Router.map(function() {
  this.route('home');
});
App.IndexRoute = Ember.Route.extend({
  redirect: function(){
    this.transitionTo('home');
  }
});
​
App.HomeRoute = Ember.Route.extend({
});
​
App.HomeController = Ember.Controller.extend({
​
});
​
App.HomeView = Ember.View.extend({
  templateName: "test-template",
  actions: {
    buttonOneClick: function(event){
      var mainContainer = this.get('mainContainer');
      var newView1 = mainContainer.createChildView(App.AnotherContainerView);
      var newView2 = mainContainer.createChildView(App.AnotherContainerView);
      var newView3 = mainContainer.createChildView(App.SecondActionView);
      var newDummyObject1 = newView1.createChildView(App.ContainerObjectView);
      var newDummyObject2 = newView2.createChildView(App.ContainerObjectView);
      newView1.pushObject(newDummyObject1);
      newView2.pushObject(newDummyObject2);
      mainContainer.pushObject(newView1);
      mainContainer.pushObject(newView2);
      mainContainer.pushObject(newView3);
      mainContainer.set('containerOne',newView1);
      mainContainer.set('containerTwo',newView2);
      
    },
  }
});
​
App.MainContainerView = Ember.ContainerView.extend({
  attributeBindings: ["draggable"],
  draggable: "true",
});
​
App.AnotherContainerView = Ember.ContainerView.extend({
  attributeBindings: ["draggable"],
  draggable: "true",
});
App.SecondActionView = Ember.View.extend({
  templateName: "second-action-template",
  actions: {
    buttonTwoClick: function(event){
      var mainContainer = this.get('parentView');
      var firstContainer = mainContainer.get('containerOne');
      var secondContainer = mainContainer.get('containerTwo');
      mainContainer.removeObject(firstContainer);
      secondContainer.pushObject(firstContainer);
    },
  }
});
App.ContainerObjectView = Ember.View.extend({
  templateName: "container-object",
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers