本文整理匯總了TypeScript中mithril.mount函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript mount函數的具體用法？TypeScript mount怎麽用？TypeScript mount使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了mount函數的9個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1:
dispose: () => {
const root = document.getElementById(ROOT_ID)
if (root) {
m.mount(root, null)
root.remove()
}
},示例2: function
(function() {
'use strict';
const controller = function() {
let messages = m.prop([]);
let text = m.prop("");
const pushMessage = function(msg: String) {
messages().push(msg) // 破壊的変更死ね
m.redraw.strategy("all")
}
const conn = new WebSocket('ws://localhost:9080/room/any?name=someone');
conn.onopen = function(e) {
console.log("socket open!");
}
conn.onerror = function(e) {
console.log(e);
// 何か再接続の処理とか取れば良いのかな
}
conn.onmessage = function(e) {
console.log("receive message: " + e.data);
pushMessage(e.data);
};
return {
messages: messages,
text: text,
sendMessage: function() {
let t = text();
text("");
console.log("message " + t + " is sent!")
conn.send(t);
pushMessage(t);
}
};
}
const view = function(ctrl) {
return m("div", [
m("div", [
m("input[type=text]", { oninput: m.withAttr("value", ctrl.text) }),
m("button", { onclick: ctrl.sendMessage }, "送信")
]),
m("div", [
m("ul", ctrl.messages().map(msg => // 何かimmutable js使ったら上手く行かなかったので仕方なく
m("li", msg)
))
])
]);
}
m.mount(document.getElementById("content"), { controller: controller, view: view })
})();示例3: comp0
import { Component, FactoryComponent, Vnode } from 'mithril';
///////////////////////////////////////////////////////////
// 0.
// Simplest component example - no attrs or state.
//
function comp0() {
return {
view() {
return m('span', "Test");
}
};
}
// Mount the component
m.mount(document.getElementById('comp0')!, comp0);
// Unmount the component
m.mount(document.getElementById('comp0')!, null);
///////////////////////////////////////////////////////////
// 1.
// Simple example. Vnode type for component methods is inferred.
//
function comp1(): Component<{}, {}> {
return {
oncreate({dom}) {
// vnode.dom type inferred
},
view(vnode) {
return m('span', "Test");示例4: m
}
{
const params = m.parseQueryString("?a=1&b=2");
const query = m.buildQueryString({a: 1, b: 2});
}
{
const root = window.document.createElement("div");
m.render(root, m("div"));
console.assert(root.childNodes.length === 1);
}
{
const root = window.document.createElement("div");
m.mount(root, { view: () => m("div") });
console.assert(root.childNodes.length === 1);
console.assert(root.firstChild!.nodeName === "DIV");
}
{
const root = window.document.createElement("div");
m.route(root, "/a", {
"/a": { view: () => m("div") }
});
setTimeout(() => {
console.assert(root.childNodes.length === 1);
console.assert(root.firstChild!.nodeName === "DIV");
}, FRAME_BUDGET);
}示例5:
import m from "mithril";
import "./styles.scss";
import { GameComponent } from "./app/game.component";
m.mount(document.getElementById("root"), GameComponent);
示例6: require
declare global { const require: (path: string) => any; }
require('./stylesheets/main.scss');
import * as m from 'mithril';
import { store } from './store';
const root = document.body;
import { About } from './components';
import { Euler, Windows } from './containers';
const App: m.Component = {
view: vnode => m("main", [ m(About), m(Windows), m(Euler) ])
}
m.mount(root, App);示例7: onDrag
render: (options: {
$isShown: Stream<boolean>
$offset: Stream<{ x: number; y: number }>
$article: Stream<Article>
$scroller: Stream<Scroller>
$headings: Stream<Heading[]>
$activeHeading: Stream<number>
$topbarHeight: Stream<number>
onDrag(offset: Offset): void
onScrollToHeading(index: number): Promise<void>
}) => {
const {
$isShown,
$offset,
$article,
$scroller,
$headings,
$activeHeading,
$topbarHeight,
onDrag,
onScrollToHeading,
} = options
const $redraw = Stream.merge([
Stream.merge([$isShown, $offset, $article, $scroller]),
Stream.merge([$headings, $activeHeading, $topbarHeight]),
]).log('redraw')
let root = document.getElementById(ROOT_ID)
if (!root) {
root = document.body.appendChild(document.createElement('DIV'))
root.id = ROOT_ID
}
addCSS(tocCSS, CSS_ID)
const isTooManyHeadings = () =>
$headings().filter((h) => h.level <= 2).length > 50
let initialPlacement: 'left' | 'right'
m.mount(root, {
view() {
if (
!$isShown() ||
!$article() ||
!$scroller() ||
!($headings() && $headings().length)
) {
return null
}
if (!initialPlacement) {
initialPlacement = calcPlacement($article())
}
return m(
'nav#smarttoc',
{
class: isTooManyHeadings() ? 'lengthy' : '',
style: calcStyle({
article: $article(),
scroller: $scroller(),
offset: $offset(),
topMargin: $topbarHeight() || 0,
placement: initialPlacement,
}),
},
[
m(Handle, {
userOffset: $offset(),
onDrag,
}),
m(TocContent, {
article: $article(),
headings: $headings(),
activeHeading: $activeHeading(),
onScrollToHeading,
}),
],
)
},
})
$redraw.subscribe(() => m.redraw())
},示例8: __reload
import 'systemjs-hot-reloader/default-listener.js'
export function __reload (mod) {
let treenodes = mod.component.getRootNodes()
if (!treenodes || !treenodes.length) {
component.importData(mod.component.exportData())
}
}
import m from 'mithril'
import createYggdrasil from 'mithril-treeview/app'
import simpleTreeData from './test/data/simple-tree'
let tree = createYggdrasil({
data: simpleTreeData
})
export let component = m.mount(document.getElementById('app'), tree)
示例9: m
},
[
m("i.fa.fa-arrow-circle-o-up", {
style: "font-size: 24px",
title: "Scroll to top",
}),
],
),
m("span.pull-right", [
"Powered by ",
m("a[href=https://xbowling.com]", "MSCN XBowling"),
" API",
]),
]),
]),
])
},
}
}
m.mount(document.body, MainComponent)
// @ts-ignore
async function scrollToTop(ev) {
if (ev.preventDefault) ev.preventDefault()
window.scroll({
top: 0,
left: 0,
behavior: "smooth",
})
}