Tiny javascript view for custom elements based on incremental-dom.
This library supports angular1 like templating.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="dist/sj.bundle.js"></script>
</head>
<body>
<template id="x-foo-template">
<div sj-bind="this.foo"></div>
</template>
<script>
sj.tag('x-foo', {
template: document.getElementById('x-foo-template').textContent
}));
</script>
<x-foo></x-foo>
</body>
</html>
You can send a custom event to the element by this method.
element is a target element to send event.
eventName is an event name.
options is argument for custom events. That can contain following parameters:
* detail: message object
* bubbles: True if event goes through its target attribute value’s ancestors in reverse tree order, and false otherwise
* cancelable: True if event is cancellable, false otherwise.
Example:
sj.tag('x-foo', {
template: '<div sj-bind="this.gotEvent"></div>'
events: {
foo: function ($event) {
this.gotEvent = $event.detail;
}
}
});
sj.fireEvent(document.querySelector('x-foo', 'foo', {detail:{hello: 'nick'}});
sj.tag(TAGNAME, OPTIONS) is an entry point to create custom element.
TAGNAME is a name of your custom element.
OPTIONS is a hash contains options described below.
TBD
TBD
Set attribute handler. This handler will be called when creating tag and attribute changed.
Example:
sj.tag('x-foo', {
attributes: {
checked: function (value) {
this.checked = value === 'true' || value === true;
this.update();
},
title: function (value) {
this.title = value;
this.update();
}
}
});
Tag example:
<x-foo checked="true" title="hoge"></x-foo>
TBD
You can iterate over array via sj-repeat.
<select sj-repeat="x in this.ary" sj-model="x.label">
<option sj-attr-value="x.value"></option>
</select>
this indicates custom element.
You can repeat over the object.
<select sj-repeat="(key, value) in this.obj">
<span sj-bind="key"></span>:<span sj-bind="value"></span>
</select>
<div sj-if="<<EXPRESSION>>"></div>
Hide element if evaluated value is falsy. You can write any ecmascript expression in there. In expression, this indicates your custom element.
<div sj-class="<<EXPRESSION>>"></div>
Specify the element's class by sj. In expression, this indicates your custom element.
sample:
<div sj-class="this.foo"></div>
<div sj-bind="<<EXPRESSION>>"></div>
This element's textContent will replaced by evaluation result of EXPRESSION. In the expression, this indicates your custom element.
<a sj-href="<<EXPRESSION>>"></a>
You can specify the href for element via sj-href attribute.
In the expression, this indicates your custom element.
If the eavaluation result contains unsafe url scheme, sj will sanitize it.
<div sj-style="<<EXPRESSION>>"></div>
You can specify the href for element via sj-style attribute.
In the expression, this indicates your custom element.
<div sj-attr-ATTR_NAME="<<EXPRESSION>>"></a>
sj-attr-* attribute compiled as attributes.
Example:
<div sj-attr-data-foo="5963"></div>
Will be interpreted as:
<div data-foo="5963"></div>
<button sj-click="this.click($event)"></button>
You can set event handler via sj. this indicates your custom element. $event is the event object that caught.
Following event handlers are supported now.
'sj-click': 'onclick', 'sj-blur': 'onblur', 'sj-checked': 'onchecked', 'sj-dblclick': 'ondblclick', 'sj-focus': 'onfocus', 'sj-keydown': 'onkeydown', 'sj-keypress': 'onkeypress', 'sj-keyup': 'onkeyup', 'sj-mousedown': 'onmousedown', 'sj-mouseenter': 'onmouseenter', 'sj-mouseleave': 'onmouseleave', 'sj-mousemove': 'onmousemove', 'sj-mouseover': 'onmouseover', 'sj-mouseup': 'onmouseup', 'sj-paste': 'onpaste', 'sj-selected': 'onselected', 'sj-submit': 'onsubmit'
(Same as jQuery 3.0)
Desktop
Chrome: (Current - 1) and Current
Edge: (Current - 1) and Current
Firefox: (Current - 1) and Current
Internet Explorer: 9+
Safari: (Current - 1) and Current
Opera: Current
Mobile
Android: 4.0+
iOS: 7+
- Tokuhiro Matsuno
- Yasuhiro MATSUMOTO
make setup
make
make test
No. But you can write a code like following.
<div>
<h2>Preview</h2>
<div sj-app="PreviewApp">
<textarea sj-model="this.html">Hello <B>John</B></textarea>
<iframe sj-attr-src="this.src()"></iframe>
</div>
</div>
<script type="text/javascript">
function PreviewApp() {
this.src = function () {
return "data:text/html," + encodeURIComponent(this.html);
};
}
</script>
No. It may cause security issue.
We are using browserstack's OSS license to testing this application on browsers!
browserstack is awesome tool to test web applications!
The MIT License (MIT)
Copyright © 2016 Tokuhiro Matsuno, http://64p.org/ <tokuhirom@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the “Software”), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.