如何使用聚乙烯与秘银1.1?

时间:2017-04-05 02:37:32

标签: javascript mithril.js

我正在尝试Polythene,但似乎所有文档都是针对Mithril的旧版本。我无法弄清楚如何将此库与当前版本的Mithril一起使用。

以下是我得到的一些基本代码,显然适用于Mithril 0.2:

import m from "mithril";
import button from "polythene/button/button";

var app = {
    view: function() {
        return m("div", [
            m.component(button, {
                label: "Hello",
                raised: true
            })
        ]);
    }
}

m.mount(document.body, app);

如何为当前的Mithril 1.1写这个?

3 个答案:

答案 0 :(得分:0)

这是对特定库的支持请求,因此您应该查看存储库。

这里有一个与Mithril 1版本有关的公开问题:https://github.com/ArthurClemens/polythene/issues/38

Polythene has reached version 1 and now supports Mithril v1!

答案 1 :(得分:0)

这就是我的做法

application.coffee

import m from 'mithril'
import { Card, Icon } from 'polythene-mithril'

starsSVG = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z'/></svg>"
starIcon = m(Icon, {svg: content: m.trust(starsSVG)})

Application =
  view: (vnode) ->
    m Card,
      content: [
        {
          header:
            title: 'Name'
            subtitle: 'date'
            icon: starIcon
        }
        {
          primary:
            title: 'Primary title'
            subtitle: 'Subtitle'
        }
        {
          text: {content: 'More text'}
        }
      ]

export {Application}

initialize.coffee

import m from 'mithril'
import {Application} from './application'

m.route.mode = 'hash'

document.addEventListener 'DOMContentLoaded', ->
  location = document.getElementById 'container'
  m.mount location, Application

答案 2 :(得分:0)

在您的示例之后,这是我的操作方法:

import m from 'mithril'
import { Button } from 'polythene-mithril'

// don't forget the CSS
import 'polythene-css/dist/polythene.css'
import 'polythene-css/dist/polythene-typography.css'

const app = {
    view: () => [
      m('div', [
        m(Button, {
          label: 'Hello',
          raised: true
        })
      ])
    ]
}

m.mount(document.body, app)