特定の要素にセルをレンダリングしますか？

Cell（CellJS）を特定の要素にレンダリングすることはできますか？たとえば、Cellをcellで管理されていない静的HTMLと共にレンダリングする場合は、または、1つのページに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>

これを行う方法を示すドキュメントには何も表示されません。またはそれが可能であっても。

出典

2017-07-21 Brett DeWoody

なり、このヘルプのhttps：//tutorial.celljs.org#e-injecting-a-cell ex-ing-dom-tree？ --- 'el'に' id'プロパティを含み、その値として 'cell_container'を含みますか？ – evolutionxbox

official API documentationは、コンポーネントを既存のDOMツリーに挿入する方法を示しています。

ただし、CellでWebページ全体を構築したくない場合があります。 Cellで小さなコンポーネントを生成し、それを既存のDOMツリーに挿入したいだけかもしれません。

これは、2つのステップで達成することができます。

はあなたの中に注入したい要素にidを設定します。
Cellオブジェクト定義に同じidを含めます。以下は

1ページに2つのセルのアプリの例です：

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>

出典

2017-07-21 13:25:32 evolutionxbox

このチュートリアルはありませんでした。あなたは将来の検索のためのより明確な "id"を言及しているソリューションにメモを追加できますか？ @BrettDeWoody。 –

クラスが使用できるかどうか、あるいは 'id'に限定されているのかどうかは分かりません。 – evolutionxbox

特定の要素にセルをレンダリングしますか？

答えて

関連する問題