ハンドルバーまたはマークダウンを使用してモデルプロパティを出力する

Question

私は、markdownまたはhtmlコンテンツのいずれかを持つプロパティを定義するモデルを持っています。

マークダウンJSライブラリを使用して情報を出力するか、ハンドル内でhtml出力を生成するかどうかは疑問です。

推奨事項はすべて当てはまります。

Answer 1

私のためにMarkdownコンバータを使用しました。ここ

は私のビューコードである：ここ

App.ActivityDetailsView = Em.View.extend(
    templateName :  'activity-details', 
    classNames :   ['details rounded shadow'], 
    rawDescriptionBinding: 'App.activityDetailsController.description', 

    description: (-> 
    converter = new Markdown.Converter().makeHtml 
    return converter(@rawDescription) 
).property('rawDescription') 

) 

は、テンプレートコードは、（生のHTMLのためのトリプルハンドルを{{{}}}注）である：ここ

<script type="text/x-handlebars" data-template-name="activity-details"> 
    {{{description}}} 
    </script> 

はにリンクされていますmore details and the showdown.js script

Answer 2

私は、動的に挿入されたハンドルバーテンプレートで処理した場合と同様のケースが発生しました。コンテンツがあるテンプレートを含むフィールドがあるoアプリケーション値。

Ember.View.create({ 
    tagName: 'span', 
    classNames: ['dynamic-content'], 
    template: Ember.Handlebars.compile(App.preCompileTemplate(template)), 
    context: someContextObject 
}); 

App.preCompileTemplate機能が有効なハンドル式でバインディングを置き換えていますが、ここにマークダウンを使用して想像：contextオブジェクトを使用して

App.preCompileTemplate = function(template) { 
    return template.replace /{(.*?)}/g, '{{context.$1}}' 
} 

テンプレートにバインドする値をスコープ。

Answer 3

コントローラを使用してモデルを飾ることをお勧めします。ただ、モデルを持つ

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
     return [ 
      { id: 1, isMD: false, md_or_html: "<p>This is HTML.</p>" }, 
      { id: 2, isMD: true, md_or_html: "*This is MD.*" } 
     ]; 
    } 
}); 

：

[ 
    { id: 1, isMD: false, md_or_html: "<p>This is HTML.</p>" }, 
    { id: 2, isMD: true, md_or_html: "*This is MD.*" } 
] 

あなたはそのモデルを返しルートを作成することから始めましょう：このモデルを考えると、我々は適切なレンダリングエンジンを使用して、これらのブログの記事のそれぞれをレンダリングしたいです返されたものがレンダリングされるわけではありません。また、インデックス・ルート用のテンプレートは、ページ上で何かを置くしようとしたことを確認する必要があります。

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each}} 
     <li>{{output}}</li> 
    {{/each}} 
    </ul> 
</script> 

あなたは私たちがそれを含めましたけれども、我々はまだ、outputプロパティを作成していないことに注意しましょうテンプレート。私たちは、処理されたHTMLや値下げの出力を追加するために我々のモデルを飾るために必要があります。

App.IndexController = Ember.ArrayController.extend({ 
    itemController: 'post' 
}); 

App.PostController = Ember.ObjectController.extend({ 
    output: function() { 
    var result; 

    if (this.get('isMD')) { 
     var converter = new Markdown.Converter(); 
     result = converter.makeHtml(this.get('md_or_html')); 
    } else { 
     result = this.get('md_or_html'); 
    } 

    /* 
    IMPORTANT!!! Ember automatically escapes HTML upon insertion. 
    To actually embed the result as HTML you will need tell Ember 
    that the value is safe to embed as HTML. 

    DO NOT RETURN SafeStrings UNLESS THE VALUE IS TRUSTED AND SANITIZED! 
    */ 
    return new Handlebars.SafeString(result); 
    }.property('isMD', 'md_or_html') 
}); 

私達はちょうどPostControllerにoutputプロパティを追加して、モデル内の各項目についてPostControllerを使用するIndexControllerを告げずにすべての仕事を持つことはできません。これはIndexControllerにitemControllerを設定することで実現します（「各項目に使用するコントローラー」）。これにより、outputのプロパティで個々のブログ投稿を個別に飾ることができます。計算されたプロパティを使用して、outputの値がポストisMDとポストのボディの有無に依存することをEmberに伝えます。いずれかが変更された場合、Emberは出力を再レンダリングします。

complete exampleは、HTMLやMDであるかどうかを判断するために、ポスト本体内にイントロスペクションのためのパターンを拡張する方法の追加コメントや詳細が含まれています。