Backbone.js 主干下划线模板

因此，我正在检查与最新主干/下划线版本相关的更改。在此之前，我有一个运行BB 0.5.2和下划线1.1.7的项目。我注意到在新版本的视图中定义模板属性时有一些奇怪的地方，这让我对升级有所保留

在我当前的版本中，我将定义如下视图：

var MyView = Backbone.View.extend({
  template: _.template($('#exampleTemplate').html()),
  initialize: function() {...},
  render: function() { $(this.el).html(this.template(someObjectParam)); },
});

但是，如果我尝试以相同的方式工作，以简化的todo克隆尝试为例，我将使用内联脚本模板设置html，如下所示：

<script>
  $(document).ready(function() {
    app.init();
  });
</script>

<script type="text/template" id="itemViewTemplate">
  <div class="item">
    <input type="checkbox" name="isComplete" value="<%= item.value %>"/>
    <span class="description"><%= item.description %></span>
  </div>
</script>

因此，我很困惑，为什么定义template属性会直接导致检索模板html的调用返回空值，从而破坏了定义下划线模板对象（moutful）的尝试。但是，如果定义是在initialize函数中完成的，则检索模板html的调用会正确地找到模板，以便将其内容传递给下划线模板。有人看到我可能遗漏了什么吗

提前谢谢

如果：

var ItemView = Backbone.View.extend({   
  //...
  templateProp: _.template($('#itemViewTemplate').html()),
  //...
});

失败是因为

$（'#itemViewTemplate'）.html（）

为

null

，那么您就有一个简单的时间问题：您试图在

#itemViewTemplate

存在之前读取它的内容。你的旧版本也会遇到同样的问题

请确保所有内容都按正确的顺序加载（即在模板

s之后加载视图），或者在视图的

初始化中编译模板。您可以在视图的
prototype
中检查
templateProp
，并仅在第一次使用时编译它（如果需要）：

initialize: function() {
    if(!this.constructor.prototype.template)
        this.constructor.prototype.template = _.template($('#itemViewTemplate').html());
    //...
}

演示：
如果：

var ItemView = Backbone.View.extend({   
  //...
  templateProp: _.template($('#itemViewTemplate').html()),
  //...
});

失败是因为
$（'#itemViewTemplate'）.html（）
为
null
，那么您就有一个简单的时间问题：您试图在
#itemViewTemplate
存在之前读取它的内容。你的旧版本也会遇到同样的问题

请确保所有内容都按正确的顺序加载（即在模板
s之后加载视图），或者在视图的
初始化中编译模板。您可以在视图的
prototype
中检查
templateProp
，并仅在第一次使用时编译它（如果需要）：

initialize: function() {
    if(!this.constructor.prototype.template)
        this.constructor.prototype.template = _.template($('#itemViewTemplate').html());
    //...
}

演示：
有趣的是，直接复制和粘贴当前TODO的主干应用程序不会遇到同样的问题。莫名其妙。有趣的是，直接复制和粘贴当前TODO的主干应用程序不会遇到同样的问题。莫名其妙。你的时间问题是对的，哦！尽管确切的修复方法是将包含的脚本包装在一个自动执行函数中，以便在文档准备就绪时运行。我真傻！谢谢你的提示@aztechy：不是一个自动执行的函数，而是一个
$（document）.ready（function（）{…}）（又称
$（function（）{…}）；
）。你的计时问题是对的，噢！尽管确切的修复方法是将包含的脚本包装在一个自动执行函数中，以便在文档准备就绪时运行。我真傻！谢谢你的提示@aztechy：不是一个自动执行的函数，而是一个
$（document）.ready（function（）{…}）（又称
$（function（）{…}）；
）。