reactやmithrilのvdomでiframeの中を管理
13054 ワード
こんなことがしたい。
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 の場合
<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>")
を読む限り
これを使えばよさそう。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)
})
Author And Source
この問題について(reactやmithrilのvdomでiframeの中を管理), 我々は、より多くの情報をここで見つけました https://qiita.com/legokichi/items/1c1c836b55e939996bb0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .