是否可以将 Cell(来自 CellJS)渲染到特定元素中？例如，如果您想呈现一个 Cell 以及一些不受 cell 管理的静态 HTML。或者如果我想在单个页面上有 2 个独立的 Cell 应用程序。
<!DOCTYPE html>
<html>
<header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cell/1.1.1/cell.min.js"></script>
<script>
var el = {
$cell: true,
$type: "div",
$components: [
// Components
]
}
</script>
</header>
<body>
<h1>A CellJS App</h1>
<div id="cell__container">
<!-- RENDER CELL HERE -->
</div>
</body>
</html>
我在文档中没有看到任何指示如何执行此操作的内容。或者如果可能的话。
最佳答案
official API documentation展示了如何将组件插入现有的 DOM 树。
However sometimes you may not want to build an entire web page with Cell. You may just want to generate a small component with Cell and inject it into an existing DOM tree.
这可以分两步实现:
- 在您要注入(inject)的元素上设置一个
id。 - 在您的 Cell 对象定义中包含相同的
id。
下面是一个页面上有两个单元格应用程序的示例:
var el = {
$cell: true,
$type: "div",
id: "cell_container1",
$components: [{
$type: "h1",
$text: "Lorem"
}, {
$type: "a",
$text: "Ipsum",
href: "https://www.google.com"
}]
};
var el2 = {
$cell: true,
$type: "div",
id: "cell_container2",
$components: [{
$type: "h1",
$text: "Dolor"
}, {
$type: "a",
$text: "Sit",
href: "https://www.google.com"
}]
};<script src="https://cdnjs.cloudflare.com/ajax/libs/cell/1.1.1/cell.min.js"></script>
<h1>A CellJS App</h1>
<div id="cell__container1">
<!-- RENDER CELL HERE -->
</div>
<div id="cell__container2">
<!-- RENDER CELL HERE -->
</div>关于javascript - 将 Cell 渲染成特定元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45238378/