-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，然后是li子拥有自己的ul：

    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。

当我在 chrome 检查器中展开 ul 标签时，我可以看到 firstElementChild 是 li#home-forwards 并且所有的 innerHTML 都如上。然而它仍然不知何故无法得到里。

现在，如果我将上面的 html 硬编码到模板中，就会找到 ul 和 li ！

有任何想法吗？

4

1 回答 1

0

您应该this.prepareList()在“成功”回调中调用。现在，您在尚未成功获取集合时调用它。

于 2013-10-19T01:15:09.490 回答