2

頭を動かす方法として、Ember.jsでHTML（メール/ページ）作成ツールを作成してきました。これは一種のWYSIWYGだと思います。

ユーザーはさまざまな値（リンク、テキストなど）でさまざまなオブジェクトを追加します。オブジェクトはさまざまなテンプレートを持ち、コントローラーにフィードバックするjQueryUIで配置できます。ユーザーが画面に表示するものは実際にその場にあり、現在、永続化の方法としてローカルストレージからクリーンな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についての私の以前のいくつかの質問に答えてくれたここにいる他の人々に感謝します。

編集

はっきり言って、私はこのような出力を得ることについて話している

<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>

ソリューション編集

誰かがこのリンクを見つけた場合に備えて、属性ループ内にattrのチェックを（標準のJSバージョンに）追加しました。

<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として「undefined」を渡していました。jQueryは各関数全体を解決したいと考えているため、これが何であるかを正確にデバッグできませんでした。現時点では、チェックは機能しているようです。私が恐れている特定の元のコーヒースクリプトファイルをどのように考慮に入れるかわからない。

4

1 に答える 1

0

CodeBriefのghemptonは、この素晴らしい投稿でそれについて少し話します：http: //codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

ヒント7を確認してください。それらもすべて読んでください。それだけの価値があります。

ちなみに、これはCoffeescriptの投稿にあります。JSバージョンを取得する必要がある場合は、[Try Coffeescript]タブのhttp://coffeescript.org/にアクセスして、変換してください。

于 2012-04-11T12:11:58.973 に答える