riotux-todoを眺めているとriot.tag2なるメソッドが出現する。
意味不明だったのでカスタムタグ関連のAPIを俯瞰してみることにする。
API一覧
本家(日本語)を一覧にしてみる。
| API | description |
|---|---|
| riot.mount(customTagSelector, [opts]) | customTagSelector ページから要素を選択し、カスタムタグをそこにマウントする。 |
| riot.mount('*', [opts]) | ページ上のすべてのカスタムタグをマウントする。 |
| riot.mount(selector, tagName, [opts]) | selector で指定されたDOMにタグをマウントする。 |
| riot.render(tagName, [opts]) | タグをHTMLとしてレンダリング。このメソッドは サーバサイド (Node/io.js) でのみ利用可。 |
| this.update() | 現在のタグインスタンス内と、子タグについても同様に、すべてのテンプレート変数を更新する。 |
| this.update(data) | 現在のインスタンスに値をセットして、テンプレート変数を更新する。 |
| riot.update() | ページ上のすべてのタグとそのテンプレート変数を更新する。 |
| this.unmount(keepTheParent) | タグとその子孫をページから取り除く。"unmount"イベントが発火する。 |
| riot.tag(tagName, html, [css], [attrs], [constructor]) | 新しいカスタムタグを「手動」でコンパイラを使わずに作成する。 |
| riot.Tag(impl, conf, innerHTML) | 【実験的:Riot2.3】では、内部で使用されているTag関数を利用して、より自由にカスタムタグを作る。 |
riot.tag2
しかし、一覧にしてみるも riot.tag2 は存在しない。
riotux-todo, riotux 両方grepしてみるもヒットしない。
riot.js を探してみる。するとありました。riot.js に。
/**
* Create a new riot tag implementation (for use by the compiler)
* @param { String } name - name/id of the new riot tag
* @param { String } html - tag template
* @param { String } css - custom tag css
* @param { String } attrs - root tag attributes
* @param { Function } fn - user function
* @returns { String } name/id of the tag just created
*/
riot.tag2 = function(name, html, css, attrs, fn) {
if (css) styleManager.add(css)
//if (bpair) riot.settings.brackets = bpair
__tagImpl[name] = { name: name, tmpl: html, attrs: attrs, fn: fn }
return name
}
ここに少し説明がありました。
Riot.js ソースコード完全解説 v3対応版 #カスタムタグの読み込み #riot.tag2()
カスタムタグを登録する。基本的には手動で使わない。
だそうです。
なんだよriotux-todo使わんといてほしいなぁ。
ちなみに日本語サイトだからドキュメント無いんかな？と思い英語サイトを見てみるも存在しませんでした。
もういちど一覧
riotのメソッドとアトリビュートを一覧にしてみた。
なんか使えそうなものがあるかも。。。。ないか。。。
たしかにtag2は「for use by the compiler」と書いているな。
tag2はtagに脳内変換しても支障なさそう。
| elements | type | description |
|---|---|---|
| observable = function(el) | func | --- |
| brackets | var? | riot.util.brackets |
| tmp | var? | --- |
| mkitem(expr, key, val) | func | --- |
| mkdom | func? | lib/browser/tag/mkdom.js |
| mkitem(expr, key, val) | func | Convert the item looped into an object used to extend the child tag properties |
| unmountRedundant(items, tags) | func | Unmount the redundant tags |
| moveNestedTags(child, i) | func | Move the nested custom tags in non custom loop tags |
| addVirtual(tag, src, target) | func | Adds the elements for a virtual tag |
| moveVirtual(tag, src, target, len) | func | Move virtual tag and all child nodes |
| _each(dom, parent, expr) | func | Manage tags having the 'each' |
| styleManager | var | Object that will be used to inject and manage the css of every tag instance |
| parseNamedElements(root, tag, childTags, forceParsingNamed) | func | --- |
| parseExpressions(root, tag, expressions) | func | --- |
| Tag(impl, conf, innerHTML) | func | --- |
| setEventHandler(name, handler, dom, tag) | func | Attach an event to a DOM node |
| insertTo(root, node, before) | func | Insert a DOM node replacing another one (used by if- attribute) |
| update(expressions, tag) | func | Update the expressions in a Tag instance |
| each(els, fn) | func | Specialized function for looping an array-like collection with each={} |
| isFunction(v) | func | Detect if the argument passed is a function |
| getOuterHTML(el) | func | Get the outer html of any DOM node SVGs included |
| setInnerHTML(container, html) | func | Set the inner html of any DOM node SVGs included |
| isSVGTag(name) | func | Checks wether a DOM node must be considered part of an svg document |
| isObject(v) | func | Detect if the argument passed is an object, exclude null. |
| remAttr(dom, name) | func | Remove any DOM attribute from a node |
| toCamel(string) | func | Convert a string containing dashes to camel case |
| getAttr(dom, name) | func | Get the value of any DOM attribute on a node |
| setAttr(dom, name, val) | func | Set any DOM attribute |
| getTag(dom) | func | Detect the tag implementation by a DOM node |
| addChildTag(tag, tagName, parent) | func | Add a child tag to its parent into the tags object |
| moveChildTag(tag, tagName, newPos) | func | Move the position of a custom tag in its parent tag |
| initChildTag(child, opts, innerHTML, parent) | func | Create a new child tag including it correctly into its parent |
| getImmediateCustomParentTag(tag) | func | Loop backward all the parents tree to detect the first custom parent tag |
| defineProperty(el, key, value, options) | func | Helper function to set an immutable property |
| getTagName(dom) | func | Get the tag name of any DOM node |
| extend(src) | func | Extend any object with other properties |
| contains(arr, item) | func | Check whether an array contains an item |
| isArray(a) | func | Check whether an object is a kind of array |
| isWritable(obj, key) | func | Detect whether a property of an object could be overridden |
| cleanUpData(data) | func | With this function we avoid that the internal Tag methods get overridden |
| walk(dom, fn) | func | Walk down recursively all the children tags starting dom node |
| walkAttributes(html, fn) | func | Minimize risk: only zero or one space between attr & value |
| isInStub(dom) | func | Check whether a DOM node is in stub mode, useful for the riot 'if' directive |
| mkEl(name, isSvg) | func | Create a generic DOM node |
| $$(selector, ctx) | func | Shorter and fast way to select multiple nodes in the DOM |
| $(selector, ctx) | func | Simple object prototypal inheritance |
| inherit(parent) | func | Simple object prototypal inheritance |
| getNamedKey(dom) | func | Get the name property needed to identify a DOM node in riot |
| setNamed(dom, parent, keys) | func | Set the named properties of a tag element |
| startsWith(src, str) | func | Faster String startsWith alternative |
| rAF | var? | requestAnimationFrame function |
| mountTo(root, tagName, opts) | func | Mount a tag creating new Tag instance |
| util | var? | share methods for other riot parts, e.g. compiler |
| mixin | var? | Create a mixin that could be globally shared across all the tags |
| tag(name, html, css, attrs, fn) | func | Create a new riot tag implementation |
| tag2(name, html, css, attrs, fn) | func | Create a new riot tag implementation (for use by the compiler) |
| mount(selector, tagName, opts) | func | Mount a tag using a specific tag implementation |
| update() | func | Update all the tags instances created |
| vdom | var? | Export the Virtual DOM |
| Tag | var? | Export the Tag constructor |
おわり
API眺めて感じるのは以下のような言葉がまだ理解できていない様子。 これもちょっと整理するか。
- インスタンス
- マウント
- テンプレート
- テンプレート変数
