vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make editor and todomvc example more idiomatic

Browse source
This commit is contained in:
Leo Horie 2016-10-28 00:56:59 -04:00
parent a2c46dbf4c
commit 9ea1cf0ae0
3 changed files with 140 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

22
examples/editor/index.html
View file

@ -6,8 +6,8 @@
html,body {height:100%;margin:0;}
h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
#editor {display:flex;height:100%;}
.editor-input,.editor-preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;}
.editor-input {border:0;border-right:1px solid #ccc;outline:none;resize:none;}
.input,.preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;}
.input {border:0;border-right:1px solid #ccc;outline:none;resize:none;}
</style>
</head>
<body>
@ -15,13 +15,23 @@ h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="../../mithril.js"></script>
<script>
var data = {text: "# Markdown Editor\n\nType on the left panel and see the result on the right panel"}
//model
var state = {
text: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
update: function(value) {
state.text = value
}
}
//view
var Editor = {
view: function(vnode) {
view: function() {
return [
m("textarea.editor-input", {oninput: function(e) {data.text = e.target.value}}, data.text),
m(".editor-preview", m.trust(marked(data.text))),
m("textarea.input", {
oninput: m.withAttr("value", state.update),
value: state.text
}),
m(".preview", m.trust(marked(state.text))),
]
}
}