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">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
​
<body>
​
  <div id="app">
    <div id="mycomp">
      <h1></h1>
    </div>
  </div>
​
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.22.8.min.js"></script>
​
</body>
​
</html>
 
var newData = {
  data: 'Data from HOC...',
};
​
var MyHOC = function(id, ComposedComponent, props) {
​
  return mag.create(id, {
    controller: function(props) {
      props.data = newData.data;
      ComposedComponent.controller.apply(this, arguments);
    },
    view: function(state, props) {
      ComposedComponent.view.apply(this, arguments);
    }
  }, props);
};
​
​
var MyComponent = {
  controller: function() {
    this.willupdate = function() {
      console.log('willupdate');
    };
  },
  view: function(state, props) {
    state.h1 = props.data;
  }
};
​
var hoc = MyHOC('mycomp', MyComponent);
​
mag.module('app', {
  view: function(state, props) {
    hoc({
      stuff: 123
    });
  }
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers