使用把手或降价来输出模型属性

Question

我有一个模型,它定义了一个带有markdown或html内容的属性.

我想知道是否使用markdown 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>

这是一个指向更多细节和showdown.js脚本的链接

Answer 2

Ember建议您使用控制器来装饰您的模型.鉴于此模型,我们希望使用适当的呈现引擎呈现每个博客帖子:

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

您将首先创建一个返回该模型的路线:

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.*" }
        ];
    }
});

只是返回模型并不意味着事情会被渲染.您还需要确保索引路由的模板尝试在页面上放置一些内容:

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

您会注意到我们尚未创建output属性,但我们已将其包含在我们的模板中.我们需要修饰我们的模型以添加处理过的HTML或Markdown输出:

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')
});

我们不能只是添加output属性PostController并使一切工作,而不用告诉IndexController我们使用PostController模型中的每个项目.这可以通过设置来完成itemController的IndexController("用什么控制每个项目"认为).这允许我们使用output属性单独装饰每个博客帖子.我们使用计算属性来告诉Ember,其值output取决于帖子isMD和帖子的正文.如果有任何改变,我们希望Ember重新渲染输出.

该完整的例子包括有关如何内省扩展模式进入人体后,以确定它是否是HTML或MD补充意见和细节.