使用 Backbone 和 Handlebar 连续 table 和 HTML?

Using Backbone and Handlebar to make a table with HTML in a row?

我在 Rails 应用程序上有一个 Ruby,使用 Backbone。在咖啡里,我有:

class App.Views.TableElement extends Backbone.View
  events:
    "change input[name='past_results']": "togglePastResults",
    "change .cohort_toggle select": "selectCohort"

  initialize: (options) ->
    @listenTo(@model, "change", @render)

  render: =>
    console.log @model.toJSON()
    @$el.empty().append(HandlebarsTemplates['shared/table_element'](@model.toJSON(), data: { tableClass: @tableClass() }))
    @$el.find('.cohort_toggle select').val(@model.get("selectedCohortLabel"))
    @$el

我认为这是相关的一点。

我不会展示整个 model.toJSON 输出,但它有 headers 和行,就像 table 应该的那样。其中一行中的一个元素应该是 link。最终我认为这将是一个 link 到 javascript 我想,但现在,我只想要一个 link 到 google 来测试......所以我是将元素硬编码为 '<a href="https://google.com">Visit google</a>' 然而,这是用 &lt 和东西解释的,所以 HTML 是实际出现在 table.

中的内容

问题是:谁在逃避我的 HTML,我该如何阻止它?

模型(部分):

class App.Table extends Backbone.Model
  defaults: {
    showPastResults: true
  }

  initialize: ->
    @set("selectedCohortLabel", @get("cohortLabels")[0])


  columns: =>
    columns = []
    Array::push.apply columns, [@get('categories')]
    Array::push.apply columns, @get('currentData')

    Array::push.apply columns, [['<a href="https://google.com">Visit google</a>', 5, 5]]    if @get('haveDataBytes')
    columns

模板。所有这些都是因为我不确定它有什么作用......所以它有模型摘录没有的列:

<table class="table {{@tableClass}}">
  <thead>
    <tr>
      {{#each headers}}
      <th class="{{this.class}}">
        {{#if this.data }}
          {{ this.data }}
        {{ else }}
          {{ this }}
        {{/if}}
      </th>
      {{/each}}
    </tr>
  </thead>

  <tbody>
    {{#each rows}}
    <tr>
      {{#each this}}
      <td>{{this}}</td>
      {{/each}}
    </tr>
    {{/each}}
  </tbody>
</table>

来自fine manual:

HTML Escaping
Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.

大概您的 columns 数据在某处进入了模型的 toJSON return 值。您的模板将需要某种方式知道它何时处理 link 以便它可以说 {{{link}}} 而不是 {{link}} 以防止 {{...}} 转义 HTML.


此外,您可以这样编写 columns 方法:

columns: ->
  columns = [ @get('categories'), @get('currentData')... ]
  if @get('haveDataBytes')
    columns.push ['<a href="https://google.com">Visit google</a>', 5, 5]
  columns

避免对 Array 原型的奇怪和非惯用用法。