0

次のバックボーン (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ため、タグリストがバックボーン ビューと関数に適切に渡されることがわかり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グローバルオブジェクトになるので、あなたが思っているものではありません。これを回避するには、コールバック関数を定義するときにfat-arrow（）を使用します。windowthis.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)。thisArgisundefinedまたは。の場合、関数内nullのthis値は、関数が厳密モードであるかどうかによって異なります（厳密モードの場合は渡された値、非厳密モードの場合はグローバルオブジェクト）。

=>心配する必要がないように使用することをお勧めします。thisArgまたは、 ：を使用することもできます

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

しかし、それはCoffeeScriptでは少し醜くて面倒な傾向があります。

于 2012-07-31T04:22:22.580 に答える