1

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，我的代码将它们输出如下：

在此处输入图像描述

我的模板有什么问题？

4

1 回答 1

2

我认为您误解了在下划线模板中的工作方式<%=...%>和工作方式。<%-...%>来自精美手册：

模板函数可以使用<%= … %>,
[...]
插入变量<%- … %>

因此，如果您说<%= v %>,v直接进入模板，如果您说<%- v %>thenv将在进入模板之前进行 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>
<!-- ------------------^         -->

整理您的显示器。

于 2013-04-08T17:33:48.497 回答