├── .gitattributes
├── .gitignore
├── README.md
├── ideas.js
├── package.json
└── test.html


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # knockout-react
  2 | A wrapper / bridge for using React.js with Knockout and Knockout with React.js
  3 | 
  4 | 
  5 | ## Usage
  6 | 
  7 | ### Using Knockout from within the context of React
  8 | 
  9 | Using the `KnockoutMixin` mixin for a React component makes that components rendered DOM tree 
 10 | bound to a viewmodel with `props` and `state` properties, which stay in sync with the 
 11 | corresponding `props` and `state` of the React component.  You simply use the `data-bind` attribute
 12 | syntax like you normally would with Knockout.
 13 | 
 14 | ```js
 15 | var KnockoutMixin = require('knockout-react').KnockoutMixin;
 16 | 
 17 | var ToDoList = React.createClass({
 18 |     mixins: [ KnockoutMixin ],
 19 | 
 20 |     propTypes: {
 21 |         todos: React.PropTypes.array.isRequired
 22 |     },
 23 | 
 24 |     render() {
 25 |         return (
 26 |             <ul data-bind="foreach: props.todos">
 27 |                 <li data-bind="text: $data"></li>
 28 |             </ul>
 29 |         );
 30 |     }
 31 | });
 32 | ```
 33 | 
 34 | 
 35 | ### Using React from within the context of Knockout
 36 | 
 37 | Using the `react` binding handler within knockout requires that you pass it a `$` option with the 
 38 | react Component you would like to render in the sub-tree. You can optionally pass a `props` option
 39 | (which can be observable) to be passed in as props to the component. By default, the binding context 
 40 | `$data` is passed in as props.
 41 | 
 42 | ```html
 43 | <ul data-bind="react: { $: ToDoList, props: { todos: todos } }><ul>
 44 | ```
 45 | 
 46 | ## How does it work?
 47 | 
 48 | The Knockout mixin is pretty straight-forward:
 49 | 
 50 | ```js
 51 | var KnockoutMixin = {
 52 | 
 53 |     updateKnockout() {
 54 |         this.__koTrigger(!this.__koTrigger());
 55 |     },
 56 | 
 57 |     componentDidMount() {
 58 |         this.__koTrigger = ko.observable(true);
 59 |         this.__koModel = ko.computed(function () {
 60 |             this.__koTrigger(); // subscribe to changes of this...
 61 | 
 62 |             return {
 63 |                 props: this.props,
 64 |                 state: this.state
 65 |             };
 66 |         }, this);
 67 | 
 68 |         ko.applyBindings(this.__koModel, this.getDOMNode());
 69 |     },
 70 | 
 71 |     componentWillUnmount() {
 72 |         ko.cleanNode(this.getDOMNode());
 73 |     },
 74 | 
 75 |     componentDidUpdate() {
 76 |         this.updateKnockout();
 77 |     }
 78 | };
 79 | ```
 80 | 
 81 | Similarly, the `react` bindingHandler is a straight-forward wrapper around `React.render`:
 82 | 
 83 | ```js
 84 | var reactHandler = ko.bindingHandlers.react = {
 85 |     render: function ( el, Component, props ) {
 86 |         React.render(
 87 |             React.createElement(Component,props),
 88 |             el
 89 |         );
 90 |     },
 91 | 
 92 |     init: function ( el, valueAccessor, allBindingsAccessor, viewModel, bindingContext ) {
 93 |         var options = valueAccessor();
 94 |         var Component = ko.unwrap(options.component || options.$);
 95 |         var props = ko.toJS('props' in options ? options.props : viewModel);
 96 | 
 97 |         reactHandler.render(el, Component, props);
 98 | 
 99 |         return { controlsDescendantBindings: true };
100 |     },
101 | 
102 |     update: function ( el, valueAccessor, allBindingsAccessor, viewModel, bindingContext ) {
103 |         var options = valueAccessor();
104 |         var Component = ko.unwrap(options.component || options.$);
105 |         var props = ko.toJS(options.props || viewModel);
106 | 
107 |         reactHandler.render(el, Component, props);
108 | 
109 |         return { controlsDescendantBindings: true };
110 |     }
111 | };
112 | ```
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 


--------------------------------------------------------------------------------
/ideas.js:
--------------------------------------------------------------------------------
 1 | var KnockoutMixin = {
 2 | 
 3 |     updateKnockout() {
 4 |         this.__koTrigger(!this.__koTrigger());
 5 |     },
 6 | 
 7 |     componentDidMount() {
 8 |         this.__koTrigger = ko.observable(true);
 9 |         this.__koModel = ko.computed(function () {
10 |             this.__koTrigger(); // subscribe to changes of this...
11 | 
12 |             return {
13 |                 props: this.props,
14 |                 state: this.state
15 |             };
16 |         }, this);
17 | 
18 |         ko.applyBindings(this.__koModel, this.getDOMNode());
19 |     },
20 | 
21 |     componentWillUnmount() {
22 |         ko.cleanNode(this.getDOMNode());
23 |     },
24 | 
25 |     componentDidUpdate() {
26 |         this.updateKnockout();
27 |     }
28 | };
29 | 
30 | var ToDoList = React.createClass({
31 |     mixins: [ KnockoutMixin ],
32 | 
33 |     propTypes: {
34 |         todos: React.PropTypes.array.isRequired
35 |     },
36 | 
37 |     render() {
38 |         return (
39 |             <ul data-bind="foreach: props.todos">
40 |                 <li data-bind="text: $data"></li>
41 |             </ul>
42 |         );
43 |     }
44 | });
45 | 
46 | // <ul data-bind="react: { $: ToDoList, props: $data }><ul>
47 | var reactHandler = ko.bindingHandlers.react = {
48 |     render: function ( el, Component, props ) {
49 |         React.render(
50 |             React.createElement(Component,props),
51 |             el
52 |         );
53 |     },
54 | 
55 |     init: function ( el, valueAccessor, allBindingsAccessor, viewModel, bindingContext ) {
56 |         var options = valueAccessor();
57 |         var Component = ko.unwrap(options.component || options.$);
58 |         var props = ko.toJS(options.props || viewModel);
59 | 
60 |         reactHandler.render(el, Component, props);
61 | 
62 |         return { controlsDescendantBindings: true };
63 |     },
64 | 
65 |     update: function ( el, valueAccessor, allBindingsAccessor, viewModel, bindingContext ) {
66 |         var options = valueAccessor();
67 |         var Component = ko.unwrap(options.component || options.$);
68 |         var props = ko.toJS(options.props || viewModel);
69 | 
70 |         reactHandler.render(el, Component, props);
71 | 
72 |         return { controlsDescendantBindings: true };
73 |     }
74 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "knockout-react",
 3 |   "version": "0.0.0",
 4 |   "description": "A wrapper / bridge for using Knockout with React.js and React.js with Knockout",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/lelandrichardson/knockout-react.git"
12 |   },
13 |   "keywords": [
14 |     "knockout",
15 |     "react"
16 |   ],
17 |   "author": "Leland Richardson",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/lelandrichardson/knockout-react/issues"
21 |   },
22 |   "homepage": "https://github.com/lelandrichardson/knockout-react",
23 |   "devDependencies": {
24 |     "react": "^0.13.1",
25 |     "knockout": "^3.3.0",
26 |     "babel": "^5.0.8"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <meta charset="UTF-8">
 5 |     <title></title>
 6 | </head>
 7 | <body>
 8 | 
 9 | 
10 |     <h3>Knockout Example</h3>
11 | <div id="koTest">
12 |     <div data-bind="text: text"></div>
13 |     <div data-bind="react: { $: ToDoList, props: { todos: todos }}"></div>
14 | </div>
15 | 
16 | 
17 | <h3>React Example</h3>
18 | 
19 | <div id="reactTest"></div>
20 | 
21 | 
22 |     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script>
23 |     <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
24 |     <script src="ideas.es5.js"></script>
25 |     <script>
26 |         var vm = {
27 |             text: "some text",
28 |             todos: ko.observableArray([
29 |                 "one","two","three"
30 |             ])
31 |         };
32 |         ko.applyBindings(vm, document.getElementById("koTest"));
33 | 
34 |         setInterval(function () {
35 |             vm.todos.shift();
36 |             vm.todos.push("" + Math.random());
37 |         }, 100);
38 | 
39 | 
40 |         // react example
41 | 
42 |         var reactList = ["one","two","three"];
43 | 
44 |         var render = function (todos) {
45 |             React.render(
46 |                 React.createElement(ToDoList, { todos: todos }),
47 |                 document.getElementById("reactTest")
48 |             );
49 |         };
50 | 
51 |         render(reactList);
52 | 
53 |         setInterval(function () {
54 |             reactList.shift();
55 |             reactList.push("" + Math.random());
56 |             render(reactList);
57 |         }, 100);
58 | 
59 | 
60 |     </script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------