当前位置: 软件>JavaScript软件
轻量级的 CoffeeScript 库 Reactive Coffee
本文导语: Reactive Coffee 是轻量级的 CoffeeScript 库/DSL，为响应式编程和声明式构建可扩展 web UIs 提供帮助。 示例： # This is our core data model, an array of Task objects.class Task constructor: (descrip, priority, isDone) -> @descrip = rx.cell(d...
Reactive Coffee 是轻量级的 CoffeeScript 库/DSL，为响应式编程和声明式构建可扩展 web UIs 提供帮助。
![轻量级的 CoffeeScript 库 Reactive Coffee[图片]](/img/tech-article-img-javascript/img_1418549127_406333.jpeg)
示例：
# This is our core data model, an array of Task objects.class Task
constructor: (descrip, priority, isDone) ->
@descrip = rx.cell(descrip)
@priority = rx.cell(priority)
@isDone = rx.cell(isDone)tasks = rx.array([
new Task('Get milk', 'important', false)
new Task('Play with Reactive Coffee', 'critical', false)
new Task('Walk the dog', 'meh', false)])# Our main view: a checklist of tasks, a button to add a new task, and a task# editor component (defined further down).main = ->
currentTask = rx.cell(tasks.at(0)) # "View model" of currently selected task
$('body').append(
div {class: 'task-manager'}, [
h1 {}, bind -> ["#{tasks.length()} task(s) for today"]
ul {class: 'tasks'}, tasks.map (task) ->
li {class: 'task'}, [
input {type: 'checkbox', init: -> @change => task.isDone.set(@is(':checked'))}
span {class: 'descrip'}, bind -> [
"#{task.descrip.get()} (#{task.priority.get()})"
]
a {href: 'javascript: void 0', init: -> @click => currentTask.set(task)}, [
'Edit'
]
]
button {init: -> @click => tasks.push(new Task('Task', 'none', false))}, [
'Add new task'
]
taskEditor {
task: bind -> currentTask.get()
onSubmit: (descrip, priority) ->
currentTask.get().descrip.set(descrip)
currentTask.get().priority.set(priority)
}
]
)# The task editor demonstrates how to define a simple component.taskEditor = (opts) ->
task = -> opts.task.get()
theForm = form {}, [
h2 {}, ['Edit Task']
label {}, ['Description']
descrip = input {type: 'text', value: bind -> task().descrip.get()}
br {}
label {}, ['Priority']
priority = input {type: 'text', value: bind -> task().priority.get()}
br {}
label {}, ['Status']
span {}, bind -> [if task().isDone.get() then 'Done' else 'Not done']
br {}
button {}, ['Update']
]
theForm.submit ->
opts.onSubmit(descrip.val().trim(), priority.val().trim())
@reset()
false$(main)
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。