Использование руля или уценки для вывода свойства модели - PullRequest
Новая
       0

Использование руля или уценки для вывода свойства модели

2 голосов
/ 28 марта 2012

У меня есть модель, которая определяет свойство с уценкой или HTML-содержанием.

Мне интересно, использовать ли библиотеку JS markdown для вывода информации или использовать руль для генерации вывода html внутри представления.

Любые рекомендации, примеры будут оценены.

Ответы [ 3 ]

5 голосов
/ 20 февраля 2014

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.

5 голосов
/ 29 марта 2012

Использование конвертера 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')

)

Вот код шаблона (обратите внимание на тройные рули {{{}}} для rawhtml): 

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

Вот ссылка на подробности и скрипт showdown.js

0 голосов
/ 29 марта 2012

Я столкнулся с похожим случаем, который я обработал с помощью динамически вставленного шаблона руля: у меня есть поле, содержащее шаблон, который может иметь содержимое , привязанное к значениям приложения . 

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

Функция App.preCompileTemplate заменяет привязки действительными выражениями руля, но вы также можете представить себе использование Markdown здесь: 

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

Использование объекта context определяет значения, которые вы связываете с шаблоном.

...