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>

以下是more details and the showdown.js script

的链接

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重新渲染输出。

complete example包含有关如何将内省模式扩展到帖子正文以确定它是HTML还是MD的其他注释和详细信息。

Answer 3

我遇到了一个类似的案例，我使用动态插入的把手模板处理：我有一个包含模板的字段，其内容可以绑定到应用程序值。

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

App.preCompileTemplate函数用有效的Handlebars表达式替换绑定，但你也可以想象在这里使用Markdown：

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

使用context对象范围将您绑定到模板中的值。

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

3 个答案: