Question

是否可以将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>

我没有在文档中看到任何指示如何执行此操作的内容。或者如果它甚至可能。

Answer 1

official API documentation显示了如何将组件插入现有DOM树。

但有时您可能不希望使用Cell构建整个网页。您可能只想生成一个包含Cell的小组件并将其注入现有的DOM树中。

这可以通过两个步骤实现：

在您要注入的元素上设置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>

将单元格渲染为特定元素？

1 个答案: