❤
npm
Sign UpSign In

knockout-jsx

1.0.3 • Public • Published

knockout-jsx

Use JSX with Knockout.

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-jsx

Once 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: The name of the component. This is the HTML element where a component will be rendered. For example, if a component with the name 'counter' is passed to this method, the component will be rendered wherever a <counter></counter> tag appears in the page markup. The value of name must be all lowercase.
  • component: The component object. This must have the following properties:
    • viewModel: The view model definition for the component.
    • jsxTemplate: The JSX template object to use for the component. A build tool must convert the JSX markup to DOM API methods prior to calling registerJSXComponent. 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.

/knockout-jsx/

    Package Sidebar

    Install

    npm i knockout-jsx

    Repository

    github.com/Spreetail/knockout-jsx

    Homepage

    github.com/Spreetail/knockout-jsx#readme

    Weekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • njebert
    • dwignall
    • metalex9
    Try on RunKit
    Report malware