knockout-jsx
v1.0.3
Published
Use JSX with Knockout.
Downloads
6
Readme
knockout-jsx
JSX is not coupled to React. This little library will enable its use with Knockout instead.
Installation
Install knockout-jsx through npm.
npm install --save knockout-jsxOnce installed, knockout-jsx supports several types of imports.
ES6
import { registerJSXComponent } from 'knockout-jsx';
CommonJS
const { registerJSXComponent } = require('knockout-jsx');
// Or...
const knockoutJSX = require('knockout-jsx');UMD
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>
Usage
Build Step
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.
Components
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>API
registerJSXComponent(name, component)
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.
- [
Testing
Run npm run test to start the Karma
test runner with PhantomJS.
To just run the tests once, run npm run test-once.
License
Licensed under the MIT License.