More than 5 years have passed since last update.

reactやmithrilのvdomでiframeの中を管理

Last updated at 2015-10-08Posted at 2015-10-07

こんなことがしたい。

react の場合

<body>
  <iframe id="box-preview-iframe"></iframe>
</body>

$ ->
  iframeBody = document.getElementById("box-preview-iframe").contentDocument.body
  comp = React.render(React.createElement(Preview, {}), iframeBody)
  setInterval((()->
    date = new Date
    console.log body = """<div>
    <span>#{date.getHours()}</span>:
    <span>#{date.getMinutes()}</span>:
    <span>#{date.getSeconds()}</span>
    </div>"""
    React.render(React.createElement(Preview, {body}), iframeBody)
  ),1000)

Preview = React.createClass
  render: ->
    JSXTransformer.exec(@props.body || "<div></div>")

[追記] Mithril の場合

を読む限り

http://lhorie.github.io/mithril/tools/template-converter.js

これを使えばよさそう。component含んでるけど。

<script src="template-converter.js"></script>
<body>
</body>

$ ->
  m.mount(document.body, RootComponent)

RootComponent =
  controller: (data)-> {}
  view: (ctrl)->
    m("div", {id: "box"}, [
      m("section", {id: "box-box-preview"}, [
        m.component(PreviewComponent, ctrl.PreviewController)
      ])
    ])


PreviewComponent =
  controller: (attrs)->
    setInterval((()->
      console.log date = new Date
      model.body("""<div>
      <span>#{date.getHours()}</span>:
      <span>#{date.getMinutes()}</span>:
      <span>#{date.getSeconds()}</span>
      </div>""")
      m.redraw(true)
    ),1000)
    model = {
      head: m.prop("")
      body: m.prop("")
    }
  view: (ctrl, attrs)->
    m("iframe", {
      id: "box-preview-iframe",
      config: PreviewComponent.config(ctrl, attrs)
    }, [])
  config: (ctrl, attrs)-> (elm, isInitialized, ctx, vdom)=>
    if !isInitialized
      console.log ctrl
      m.mount(elm.contentDocument.head, {
        view: (_ctrl, _attrs)->
          code = templateConverter.Template(ctrl.head())
          new Function("ctrl", "attrs", "return #{code}")(_ctrl, _attrs)
      })
      m.mount(elm.contentDocument.body, {
        view: (_ctrl, _attrs)->
          code = templateConverter.Template(ctrl.body())
          new Function("ctrl", "attrs", "return #{code}")(_ctrl, _attrs)
      })

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up