Question

template：

<div id="page-directory"></div>
<script type="text/template" id="template-site">
  <% if(featured) { %>
    <span class="featured"></span>
  <% } %>
  <a href="http://google.com"><img class="screenshot" src="content/screenshot.png" /></a>
  <div>
    <h2><a href="<%- url %>"><%- title %></a></h2>
    <p><span>Tags:</span><%- tags %></p>
    <p class="colors"><span>Colors:</span><%- colors %></p>
  </div>
</script>

model和view：

// Define a Site Model.
var Site = Backbone.Model.extend({
  defaults: {
    url: '',
    title: '',
    featured: false,
    tags: '',
    colors: ''
  }
});
// Define a Site View.
var SiteView = Backbone.View.extend({
  tagName: "article",
  template: _.template($("#template-site").html()),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

collection和collection view：

// Define a Sites Collection.
var Sites = Backbone.Collection.extend({
  url: 'sites.php',
  model: Site
});
// Define a Sites View.
var SitesView = Backbone.View.extend({
  el: $('#page-directory'),
  initialize: function() {
    this.collection.on('add', this.addOne, this);
    this.collection.on('reset', this.addAll, this);
  },
  addOne: function(site) {
    var siteView = new SiteView({model: site});
    this.$el.append(siteView.render().el);
  },
  addAll: function() {
    this.collection.forEach(this.addOne, this);
  },
  render: function() {
    this.addAll();
  }
});

和sites.php返回：

<?php

$sites = array(
    array(
        'title' => 'CGART',
        'url' => 'http://google.com',
        'featured' => true,
        'tags' => '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>',
        'colors' => '<a href="http://google.com" style="background-color: #000000;"></a>' .
        '<a href="http://google.com" style="background-color: #ffffff;"></a>',
    ),
    array(
        'title' => 'CGART',
        'url' => 'http://google.com',
        'featured' => true,
        'tags' => '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>',
        'colors' => '<a href="http://google.com" style="background-color: #000000;"></a>' .
        '<a href="http://google.com" style="background-color: #ffffff;"></a>',
    ),
);

print json_encode($sites);

在这种情况下，tags和colors是HTML，我的代码输出如下：

enter image description here

我的模板有什么问题？

Answer 1

我认为您误解了<%=...%>和<%-...%>在Underscore模板中的工作方式。来自fine manual：

模板函数可以使用<%= … %>，
来插入变量   [...]
  如果您希望插值并将其转换为HTML，请使用<%- … %>

因此，如果您说<%= v %>，v按原样直接进入模板，如果您说<%- v %>，那么v将在进入模板之前进行HTML转义。考虑一个这样的简单模板：

<script id="t" type="text/x-underscore">
    &lt;%=: <%= html %>
    <br>
    &lt;%-: <%- html %>
</script>

并在其上添加一些HTML：

var t = _.template($('#t').html());
$(whatever).html(
    t({ html: '<span>html</span>' })
);

鉴于输入，您将获得此输出：

&lt;%=: <span>html</span>
&lt;%-: &lt;span&gt;html&lt;/span&gt;

演示：http://jsfiddle.net/ambiguous/pL92b/

您的tags来自具有嵌入式HTML的服务器：

'tags' => '<a href="http://google.com">Tag 1</a>'

但是你在模板中转发了这个HTML：

<p><span>Tags:</span><%- tags %></p>

您应该可以切换到简单插值：

<p><span>Tags:</span><%= tags %></p>
<!-- ------------------^         -->

整理你的显示器。

使用下划线和主干输出HTML

1 个答案: