backbone.js - 在 Asp.Net MVC 中混合静态 html 和骨干数据的最佳方法？

Question

目前我被迫使用字符转义将我的静态 html 与我的模型数据混合，但必须有更好的方法。

我目前正在使用 .aspx 视图，这就是我的某些视图看起来多么丑陋。

$('ul#spaceImage', this.el).append("<li id=\"" + item.get("HoverId") + "\" class=\"hover\" style=\"left:" + x + "px;top:" + y + "px\"><span class=\"newlyAdded\"></span>" + item.get("MaterialGroupName") + "<a></a></li>");

有没有办法在没有字符转义的情况下显示这个？

Answer 1

我猜您在使用下划线模板时遇到问题，因为它们共享 asp.net 语法？如果是这样，您可以使用Handlebars并将您的模板代码移动到您的 asp 标记中的脚本块中。

标记：

<script type="text/html" id="list-item-template">
  <li id="{{HoverId}}" class="{{hover}}" style="left:<%=x%>px;top:<%=y%>px">
    <span class="newlyAdded"></span>
    <a><{{MaterialGroupName}}></a>
  </li>
</script>

骨干视图：

render: function() {
  var template = Handlebars.compile($("#list-item-template").html());
  $(this.el).html(template({this.model.toJSON()}));
  return this;
}