TypeScript mithril.mount函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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()
   }
 },

开发者ID:FallenMax，项目名称:smart-toc，代码行数:7，代码来源:index.ts

示例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 })
})();

开发者ID:cedretaber，项目名称:akkahttptest，代码行数:59，代码来源:app.ts

示例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");

开发者ID:DenisCarriere，项目名称:DefinitelyTyped，代码行数:31，代码来源:test-factory-component.ts

示例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);
}

开发者ID:Crevil，项目名称:DefinitelyTyped，代码行数:31，代码来源:test-api.ts

示例5:

import m from "mithril";
import "./styles.scss";
import { GameComponent } from "./app/game.component";

m.mount(document.getElementById("root"), GameComponent);

开发者ID:ghiobi，项目名称:dogetictactoe，代码行数:5，代码来源:index.ts

示例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);

开发者ID:phincallahan，项目名称:personal-website，代码行数:17，代码来源:index.ts

示例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())
  },

开发者ID:FallenMax，项目名称:smart-toc，代码行数:84，代码来源:index.ts

示例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)

开发者ID:Draggha，项目名称:pickdrasil-mithril，代码行数:17，代码来源:bootstrap.ts

示例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",
  })
}

开发者ID:nordfjord，项目名称:eyc-live，代码行数:30，代码来源:app.ts

注：本文中的mithril.mount函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。