irus
11/03/2017, 12:31 PMval tree = root(
div(classes = "main", render = h(
users()
)),
users(),
p("Test")
)
fun users() = ex {
users.map {
p(it.name)
}
}
fun list() = e {
ul(render = h(
li("First"),
li("Second")
))
}
snrostov
11/03/2017, 12:44 PMSection(
key = "s1",
title = "About",
children = listOf(
Text("About contents")
)
)
?irus
11/03/2017, 12:45 PMsnrostov
11/03/2017, 12:46 PMirus
11/03/2017, 12:48 PMval tree = root(
div(classes = "main", render = h(
e {
if (condition) {
users()
} else {
list()
}
}
)),
users(),
p("Test")
)
snrostov
11/03/2017, 12:48 PMirus
11/03/2017, 12:48 PMsnrostov
11/03/2017, 12:48 PMirus
11/03/2017, 12:51 PMsnrostov
11/03/2017, 12:52 PMirus
11/03/2017, 12:53 PMval tree = root(
div(classes = "main", render = h(
ex {
val render = mutableListOf<VDom>()
for (user in users) {
if (user.visible) {
render += p(user.name)
}
}
render.toList()
}
)),
users(),
p("Test")
)
snrostov
11/03/2017, 12:55 PMirus
11/03/2017, 12:56 PMsnrostov
11/03/2017, 12:56 PMя привык к JSX - там как раз таки в основном функциональный подхода вот и нет 🙂 все примеры на сайте реакта как раз и продауют его как процедурный
irus
11/03/2017, 1:02 PMconst CandidatesViewComponent = ({candidates}: StateProps) => {
return (
<div className="container">
<div className="row">
{candidates.map((candidate: OsCandidateWithPerson) =>
<div className="col-md-4"
style={styles.candidate}
key={candidate.id}>
<Card>
<CardHeader
title={`${candidate.firstName} ${candidate.lastName}`}
subtitle={`Status: ${candidate.status}`}
/>
<CardText>
Rating: {candidate.rating}
</CardText>
<CardActions>
<Link to={`/candidates/${candidate.id}/view`}>
<FlatButton label="View Details"/>
</Link>
</CardActions>
</Card>
</div>
)}
</div>
</div>
);
};
snrostov
11/03/2017, 1:02 PMirus
11/03/2017, 1:02 PMsnrostov
11/03/2017, 1:02 PMirus
11/03/2017, 1:03 PMsnrostov
11/03/2017, 1:14 PMdiv(className = "container",
children = [div(
className = "row",
children = candidates.map { condidate ->
div(
className = "col-md-4",
children = [card(
children = [
cardHeader(
title = "${candidate.firstName} ${candidate.lastName}",
subtitle="Status: ${candidate.status}"
)
cardText(
children = ["Rating: ", candidate.rating]
)
cardActions(
children = link(
to = "/candidates/${candidate.id}/view",
children = [flatButton(label = "View Details")]
)
)
]
)
)]
)]
)
не пытаться описать все, как в примере вышену вот проблема в том, что в kotlinx.html даже если все сразу описывать, все равно хорошо читается
irus
11/03/2017, 2:03 PMfun candidatesViewComponent() = element {
div(classes = "container", render = h(
div(classes = "row", render = elements {
candidates.map {
div(classes = "col-md-4", style = "styles.candidate", render = h(
cardHeader(
title = "${it.firstName} ${it.lastName}",
subtitle = "Status: ${it.status}"
),
cardText("Rating: ${it.rating}"),
cardActions(render = h(
link(to = "/candidates/${it.id}/view", render = h(
flatButton(label = "View Details")
))
))
))
}
})
))
}
snrostov
11/03/2017, 2:33 PMirus
11/03/2017, 2:37 PMsnrostov
11/03/2017, 2:39 PMfun candidatesViewComponent() = element {
div(
classes = "container", render = h(
div(
classes = "row", render = elements {
candidates.map {
div(
classes = "col-md-4", style = "styles.candidate", render = h(
cardHeader(
title = "${it.firstName} ${it.lastName}",
subtitle = "Status: ${it.status}"
),
cardText("Rating: ${it.rating}"),
cardActions(
render = h(
link(
to = "/candidates/${it.id}/view", render = h(
flatButton(label = "View Details")
)
)
)
)
)
)
}
}
)
)
)
}
irus
11/03/2017, 2:40 PMsnrostov
11/03/2017, 2:40 PMirus
11/03/2017, 2:47 PM