使用 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>'
然而,这是用 <
和东西解释的,所以 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
原型的奇怪和非惯用用法。
我在 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>'
然而,这是用 <
和东西解释的,所以 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
原型的奇怪和非惯用用法。