File: tsxReactEmitNesting.js

package info (click to toggle)
node-typescript 3.3.3333-1
  • links: PTS, VCS
  • area: main
  • in suites: buster
  • size: 324,548 kB
  • sloc: makefile: 6; sh: 3
file content (57 lines) | stat: -rw-r--r-- 3,265 bytes parent folder | download | duplicates (4)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//// [file.tsx]
declare var vdom: any;
declare var ctrl: any;
declare var model: any;

// A simple render function with nesting and control statements
let render = (ctrl, model) =>
    <section class="todoapp">
        <header class="header">
            <h1>todos &lt;x&gt;</h1>
            <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" value={model.newTodo} onKeyup={ctrl.addTodo.bind(ctrl, model)} />
        </header>
        <section class="main" style={{display:(model.todos && model.todos.length) ? "block" : "none"}}>
            <input class="toggle-all" type="checkbox" onChange={ctrl.toggleAll.bind(ctrl)}/>
            <ul class="todo-list">
                {model.filteredTodos.map((todo) =>
                    <li class={{todo: true, completed: todo.completed, editing: todo == model.editedTodo}}>
                        <div class="view">
                            {(!todo.editable) ?
                                <input class="toggle" type="checkbox"></input>
                                : null
                            }
                            <label onDoubleClick={()=>{ctrl.editTodo(todo)}}>{todo.title}</label>
                            <button class="destroy" onClick={ctrl.removeTodo.bind(ctrl,todo)}></button>
                            <div class="iconBorder">
                                <div class="icon"/>
                            </div>
                        </div>
                    </li>
                )}
            </ul>
        </section>
    </section>



//// [file.js]
// A simple render function with nesting and control statements
var render = function (ctrl, model) {
    return vdom.createElement("section", { "class": "todoapp" },
        vdom.createElement("header", { "class": "header" },
            vdom.createElement("h1", null, "todos <x>"),
            vdom.createElement("input", { "class": "new-todo", autofocus: true, autocomplete: "off", placeholder: "What needs to be done?", value: model.newTodo, onKeyup: ctrl.addTodo.bind(ctrl, model) })),
        vdom.createElement("section", { "class": "main", style: { display: (model.todos && model.todos.length) ? "block" : "none" } },
            vdom.createElement("input", { "class": "toggle-all", type: "checkbox", onChange: ctrl.toggleAll.bind(ctrl) }),
            vdom.createElement("ul", { "class": "todo-list" }, model.filteredTodos.map(function (todo) {
                return vdom.createElement("li", { "class": { todo: true, completed: todo.completed, editing: todo == model.editedTodo } },
                    vdom.createElement("div", { "class": "view" },
                        (!todo.editable) ?
                            vdom.createElement("input", { "class": "toggle", type: "checkbox" })
                            : null,
                        vdom.createElement("label", { onDoubleClick: function () { ctrl.editTodo(todo); } }, todo.title),
                        vdom.createElement("button", { "class": "destroy", onClick: ctrl.removeTodo.bind(ctrl, todo) }),
                        vdom.createElement("div", { "class": "iconBorder" },
                            vdom.createElement("div", { "class": "icon" }))));
            }))));
};