-1

サッカー選手のリストを表すバックボーン テンプレートがあります。レンダリング後、他のテンプレートを挿入してテンプレート要素の一部を変更します。ビューの render() 関数は次のとおりです。

    render: function () {
        that = this;
        this.$el.html(template(this.model.attributes));

        var homeTeam = new player.PlayerCollection({team_id: this.model.get('home_id')});

        homeTeam.fetch({
        data: { forward_first:true, exlude_keepers:true},
        processData: true,
        success:function (collection) {

            var forwards = collection.where({'position':'Forward'});
            new PlayerListGoalView({players: forwards, 
                                    position:"Forward",
                                    el: $("#home-forwards", that.el), 
                                    player_id:that.player_id
                                });


            }
        });


        this.prepareList();
    },

結果のhtmlには、一連のネストされたリストがあります。

  <ul id="expList" class="topcoat-list list">
    <li id="home-forwards">
        <ul class="topcoat-list list">

            <li class="topcoat-list__item " id="player-713">
                <span>Fabio Borini</span>    
            </li>

            <li class="topcoat-list__item " id="player-696">        
                <span>Jozy Altidore</span>
            </li>

            <li class="topcoat-list__item " id="player-697">
                <span>Mikael Mandron</span>     
            </li>

        </ul>
    </li>
    <li id="away-forwards">

    </li>
    <li id="home-midfielders">

    </li>
    <li id="away-midfielders">

    </li>
    <li id="home-defenders">

    </li>
    <li id="away-defenders">

    </li>    
  </ul>

prepareList() では、メインの ul を取得します。次に、ul 自体を持つ li の子です。

    prepareList: function(){

        var ul = this.$('#expList');
        var el = ul.find('li:has(ul)');

        console.log('ul.length is:'); 
        console.log(ul.length);
        console.log('el.length is:'); 
        console.log(el.length);

    },

これにより、「ul.length is:1」および「el.length is:0」が生成されます。したがって、ul は得られますが、li は得られません。

クロム インスペクターで ul タグを展開すると、firstElementChild が li#home-forwards であり、すべての innerHTML が上記のようになっていることがわかります。しかし、それはまだどういうわけかliを取得できません。

ここで、上記の html をテンプレートにハードコードすると、ul と li の両方が見つかります。

何か案は？

4

1 に答える 1

0

this.prepareList()「成功」コールバック内で呼び出す必要があります。現在、コレクションがまだ正常にフェッチされていないときに呼び出します。

于 2013-10-19T01:15:09.490 に答える