emberjsのハンドルバーアプリケーションからきれいなHTMLを取得

Question

Ember.jsにHTML（電子メール/ページ）合成ツールを構築しています。私はそれを私の頭の中に入れる方法として、WYSIWYGのようなものだと思います。

ユーザは異なる値（リンク、テキストなど）を持つさまざまなオブジェクトを追加します。オブジェクトは異なるテンプレートを持ち、コントローラにフィードバックするjQuery UIで配列できます。ユーザーが画面に表示される内容は実際に表示されています。現在は、永続性の方法としてlocalstorageからクリーンなJSONを保存してリロードしています。

私が本当にやりたいことは、ユーザーが見ているもののクリーンなHTMLバージョンを生成できることです。フロントエンドアプリケーションに書き込まれたものか、JSONを処理してサーバー側でエクスポートします。

できるだけ多くのJS、Ember、Handlebarsを保持したいと思います。テンプレート/コードを別の場所にあまりにも多く実装しないのが理想的です。

私のレンダリングされた出力の '行'の例は以下の通りです。

.row-controlsは、グローバルエディタの切り替えによってオン/オフが切り替えられます。私はそれは限られた実用的なアプリケーションで、やっている奇妙なことのように思えるかもしれないが、私は、私も:)始めた今、それを終了したいと思い

<script id="metamorph-11-start" type="text/x-placeholder"></script> 
    <div id="ember507" class="ember-view template-row ui-droppable"> 
    <ul id="ember524" class="ember-view row-controls"> 
     <li class="dragger"><a href="#">drag</a></li> 
     <li class="type"><a href="#" data-ember-action="19">type</a></li> 
     <li class="edit"><a href="#" data-ember-action="20">edit</a></li> 
     <li class="delete"><a href="#" data-ember-action="21">delete</a></li> 
    </ul> 
    <script id="metamorph-12-start" type="text/x-placeholder"></script> 
    <script id="metamorph-13-start" type="text/x-placeholder"></script> 
     <h2><a href="http://foo.com/bar" data-bindattr-34="34"> 
     <script id="metamorph-19-start" type="text/x-placeholder"></script> 
      Link title text 
     <script id="metamorph-19-end" type="text/x-placeholder"></script> 
     </a></h2> 
     <img src="http://foo.com/image.png" data-bindattr-35="35"> 
     <script id="metamorph-20-start" type="text/x-placeholder"></script> 
     Teaser/synopsis 
     <script id="metamorph-20-end" type="text/x-placeholder"></script> 
     <a href="http://foo.com/bar" data-bindattr-36="36">Read more</a> 
    <script id="metamorph-13-end" type="text/x-placeholder"></script> 
    <script id="metamorph-12-end" type="text/x-placeholder"></script> 
    </div> 
<script id="metamorph-11-end" type="text/x-placeholder"></script> 

、私はどんな答えに関わる原則はできると思いますおそらく別のアプリケーションを持って、私はまだそれを考えていないだけ

ありがとう！ Emberについて私の以前のいくつかの質問に答えてくれた他の人たちに感謝します。私が追加した -

EDIT

はちょうど私が誰でもこのリンクを見つけた場合は、この

<h2><a href="http://foo.com/bar">Link title text</a></h2> 
<img src="http://foo.com/image.png"> 
Teaser/synopsis 
<a href="http://foo.com/bar">Read more</a> 

ソリューションEDIT

のような出力を得ることについて話して、明確にします（私の標準JSバージョンに）属性ループ内のattrのチェックを行います。

<script> 
// ... 
return $.each($this[0].attributes, function(index, attr) { 
    // this bit added 
    if(!attr) { 
    return; 
    } 
    if (attr.name.indexOf('data-bindattr') === -1) { 
    return; 
    } 
    // ... 
</script> 

それは私が起こっていたいくつかの他のコードのエラーだったかもしれないが、jQueryのは、ループ内のattrとして「未定義」渡しました。 jQueryは各関数全体を解決したいので、これが何であるかを正確にデバッグすることはできませんでした。しかし、チェックは私のために現時点で働いているようだ。 元の特定のcoffeescriptファイルをどのように考慮すべきかわかりません。 CodeBriefから

Answer 1

ghemptonはこの素晴らしい記事でそれについて少し語る：http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

チェック先端7 があまりにもそれらのすべてを読んで、それにその価値があります。

ちなみに、それはあなたがJSバージョンを取得する必要がある場合は、Coffeescriptを試してみてください！http://coffeescript.org/ Try Coffeescriptタブでそれを変換してください！