react와mithril의 vdom으로 iframe 관리
12787 단어 iframeReactMithril.js
나는 이런 일을 하고 싶다.
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>")
<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)
})
Reference
이 문제에 관하여(react와mithril의 vdom으로 iframe 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/legokichi/items/1c1c836b55e939996bb0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
