Question

我有以下Backbone（在coffeescript中）视图，其中我传递一个数组并尝试将每个项目附加到el。但是，我一直想出一个空的。

ItemTagList = Backbone.View.extend
  className  : "itemTagsContainer"
  initialize : (tags) ->
    this.render(tags.taglist)

  render: (taglist) ->
    taglist.forEach (tag) ->
      tag_span = _.template($("#tag").html(), {tag : tag} )
      $(this.el).append(tag_span)
      console.log(tag)

模板$("#tag")如下所示：

<a class='tag' href="/items?tagged_with=<%= tag =>"><%= tag =></a>

渲染时，上面的内容将正确地遍历taglist，因此我知道标记列表已正确传递给Backbone View以及render函数。

但如果我做以下

itemTagList = new ItemTagList
  taglist : ["Tag1", "Tag2"]

console.log(itemTagList.el)

我总是得到空的el，即

 <div class="itemTagsContainer"></div>

而不是

 <div class="itemTagsContainer">
   <a class='tag' href="/items?tagged_with=Tag1">Tag1</a>
   <a class='tag' href="/items?tagged_with=Tag2">Tag2</a>
 </div>

这是我希望得到的。

有人可以帮忙吗？

Answer 1

您的forEach回调函数中只存在上下文问题; @（AKA this）将成为全局对象（浏览器中为window），因此this.el不是您认为的那样。您可以在定义回调函数时使用fat-arrow (=>)来解决此问题：

render: (taglist) ->
  taglist.forEach (tag) =>
    tag_span = _.template($("#tag").html(), tag: tag)
    @$el.append(tag_span)
    console.log(tag)

我已切换到@$el，因为您的观点已经有$(@el)的缓存版本。

forEach回调中的上下文取决于您所处的模式：

如果向thisArg提供了forEach参数，则会将其用作每个回调调用的此值，就像调用callback.call(thisArg, element, index, array)一样。如果thisArg为undefined或null，则函数中的this值取决于函数是否处于严格模式（如果处于严格模式，则传递值，全局对象）如果是非严格模式）。

我建议您使用=>，这样您就不用担心了;或者，您可以使用thisArg：

taglist.forEach (tag) -> ...., @

但在CoffeeScript中，这往往有点难看和麻烦。

骨干视图el不附加

1 个答案: