0

我有以下Backbone（在coffeescript中）视图，我在其中传递一个数组并尝试将每个项目附加到el。但是，我一直想出一个空的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，所以我知道标记列表已正确传递给主干视图以及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>

这是我希望得到的。

任何人都可以帮忙吗？

4

1 回答 1

2

您的forEach回调函数中只是有上下文问题；( @AKA this) 将是全局对象（window在浏览器中），所以this.el不是您认为的那样。在定义回调函数时，您可以通过使用粗箭头 ( =>)来解决此问题：

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

我也切换到了，@$el因为您的视图已经有一个缓存版本的$(@el).

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

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

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

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

但这在 CoffeeScript 中往往有点丑陋和麻烦。

于 2012-07-31T04:22:22.580 回答