JSX is not coupled to React. This little library will enable its use with Knockout instead.
Install knockout-jsx through npm.
npm install --save knockout-jsx
Once installed, knockout-jsx supports several types of imports.
import { registerJSXComponent } from 'knockout-jsx';const { registerJSXComponent } = require('knockout-jsx');
// Or...
const knockoutJSX = require('knockout-jsx');Referencing either dist/knockout-jsx.js or dist/knockout-jsx.min.js will add the API
methods to ko.jsx.
<script src="node_modules/knockout-jsx/knockout-jsx.js"></script>
<!-- Or... -->
<script src="node_modules/knockout-jsx/knockout-jsx.min.js"></script>JSX must be transpiled to DOM API methods prior to using this libary. nativejsx is recommended. See the build tools section of the nativejsx readme for instructions on use with Webpack, Gulp, Grunt, or a shell command.
This library uses
Knockout Components
and registers components with ko.components.register().
import { registerJSXComponent } from 'knockout-jsx';
function CounterViewModel() {
const self = this;
self.counter = ko.observable(0);
self.counterText = ko.computed(() => `Counter is at ${self.counter()}`);
self.incrementCounter = () => self.counter(self.counter() + 1);
}
const template = (
<div>
<div data-bind="text: counterText"></div>
<button type="button" data-bind="click: incrementCounter"></button>
</div>
);
registerJSXComponent('counter', { viewModel: CounterViewModel, jsxTemplate: template });Then, in the page markup:
<body>
<h2>Here's a counter!</h2>
<counter><!-- component will be rendered here by Knockout --></counter>
</body>Registers a given component with Knockout. This is just a wrapper for ko.components.register.
Arguments
- [
name] (String): The name of the component. This is the HTML element where a component will be rendered. For example, if a component with thename'counter' is passed to this method, the component will be rendered wherever a<counter></counter>tag appears in the page markup. The value ofnamemust be all lowercase. - [
component] (Object): The component object. This must have the following properties:- [
viewModel] (Function): The view model definition for the component. - [
jsxTemplate] (Object): The JSX template object to use for the component. A build tool must convert the JSX markup to DOM API methods prior to callingregisterJSXComponent. As such, this should actually be an Element.
- [
Run npm run test to start the Karma
test runner with PhantomJS.
To just run the tests once, run npm run test-once.
Licensed under the MIT License.