knockout-jsx
Advanced tools
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 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] (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 calling registerJSXComponent.
As such, this should actually be anRun 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.
1.0.1 - 2017-05-09
files section to package.json.FAQs
Use JSX with Knockout.
The npm package knockout-jsx receives a total of 1 weekly downloads. As such, knockout-jsx popularity was classified as not popular.
We found that knockout-jsx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.