骨干视图el不追加

我有以下Backbone（在coffeescript）视图，我传递数组并尝试将每个项目追加到el。但是，我一直在想出一个空的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>

这是我希望得到的。

任何人都可以帮忙吗？

来源

2012-07-31 DannyClay

您的forEach回调函数中只存在上下文问题; @（又名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，函数内的值取决于函数是否处于严格模式（如果是严格模式，则传递值，如果是非严格模式，则传递值）。

我推荐使用=>这样你就不用担心了;另外，您也可以使用thisArg：

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

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

来源

2012-07-31 04:22:22

哇！我刚刚工作！我整晚试图找出问题所在。感谢您指出解决方案。我真的需要在coffeescript和javascript上多包裹我的头。 – DannyClay 2012-07-31 04:30:24

@DannyClay：不客气。获得正确的'@'值（AKA'this'）可能是最常见的（Coffee | Java）脚本问题。你经常会在JavaScript中看到'var _this = this;'，'var that = this;'或'var self = this;'，那么你可以使用'_this'，'that'或'self' '这个'。 – 2012-07-31 04:44:43

骨干视图el不追加

回答

相关问题