视图没有得到渲染主干js

Question

我有以下backbonejs 代码，它从我的API 中获取集合中的数据。

app.js

var app = app || {};

app.Book = Backbone.Model.extend({
    defaults: {
    photo: 'https://tpc.googlesyndication.com/simgad/10102369525962162085'
  }

});

app.Library = Backbone.Collection.extend({
    model: app.Book,
    url: 'http://localhost:8000/api/v1/products_user',
    parse: function (response) {
       return response.data;
    }
});

app.BookView = Backbone.View.extend({
    tagName: 'article',
    className: 'white-panel',
    template: _.template( $( '#product_grid_template' ).html() ),

    render: function() {
        //this.el is what we defined in tagName. use $el to get access to jQuery html() function
        this.$el.html( this.template( this.model.attributes ) );

        return this;
    }
});


app.LibraryView = Backbone.View.extend({
    el: '#pinBoot',

    initialize: function() {                    // UPDATED
        this.collection = new app.Library();    // UPDATED
        this.collection.fetch({
            reset:true});

        this.listenTo( this.collection, 'add', this.renderBook );
        this.listenTo( this.collection, 'reset', this.render ); // NEW

    },

    // render library by rendering each book in its collection
    render: function() {
        console.log('render');
        this.collection.each(function( item ) {
            this.renderBook( item );
        }, this );
    },

    // render a book by creating a BookView and appending the
    // element it renders to the library's element
    renderBook: function( item ) {
        var bookView = new app.BookView({
            model: item
        });
        this.$el.append( bookView.render().el );
    }
});

new app.LibraryView();

以上代码呈现如下 HTML

<article class="white-panel r1 c0" style=
"width: 316.667px; left: 0px; top: 0px;">
    <div class="widget portfolio graphics homepage">
        <div class="entry-container span4">
            <!-- Portfolio Image -->
            <div class="entry-image">
                <a href="product.html"><img alt="" src=
                "https://tpc.googlesyndication.com/simgad/10102369525962162085"></a>
            </div>
            <div class="entry drop-shadow curved">
                <!-- Portfolio Heading -->
                <div class="heading">
                    <a href="#">My product</a> HII
                </div>
                <div class="camera" data-target="#prod0-modal" data-toggle=
                "modal">
                    3
                </div>
                <div class="price">
                    ₹ 10 <span>+ Delivery Charges ₹ 11</span>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</article>

整个 HTML 和数据被渲染到 HTML 中，我发现为什么不可见是因为样式参数 'style="opacity: 1;"' 没有被添加到 <div class="entry-container span4">

上面的app.js，我已经修改好了，不用API如下

app.LibraryView = Backbone.View.extend({
    el: '#pinBoot',

    initialize: function(initialBooks) {                    
        // this.collection = new app.Library();   
        // this.collection.fetch({
        //     reset:true});

        // this.listenTo( this.collection, 'add', this.renderBook );
        // this.listenTo( this.collection, 'reset', this.render ); // NEW
        this.collection = new app.Library( initialBooks );
        this.render();

    },

    // render library by rendering each book in its collection
    render: function() {
        console.log('render');
        this.collection.each(function( item ) {
            this.renderBook( item );
        }, this );
    },

    // render a book by creating a BookView and appending the
    // element it renders to the library's element
    renderBook: function( item ) {
        var bookView = new app.BookView({
            model: item
        });
        this.$el.append( bookView.render().el );
    }
});

var books = [
        { product_name: 'My product',delivery_charge: '10.00',amount:'10.22' },
           ];
new app.LibraryView(books);

现在一切正常，样式被添加到 div 中没有任何问题。样式是使用淡入淡出效果的 javascript 添加的，这应该给网格带来淡入淡出效果，但是当我使用 API 获取数据和渲染时，样式元素不会添加 div。

为什么会这样？它与页面加载渲染或异步数据加载有关吗？

我是backbonejs的新手，当我调用API时，有人可以帮我看看这里出了什么问题吗？

更新

我有这个脚本，它将不透明度元素添加到 div 以提高可见性

<script type="text/javascript">
         //<![CDATA[
            $(window).load(function() { // makes sure the whole site is loaded
                 $("#status").fadeOut(); // will first fade out the loading animation
                 $("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
                 $("#preloader-container").css("position","static");
                 $(".widget .entry-container").each(function(index) {
                     $(this).delay(400*index).animate({'opacity': 1},300);

                 });  
             });
         //]]>
      </script>

此脚本是否与我的主干数据渲染冲突？

Answer 1

您在绑定事件以进行处理之前获取数据。如果获取速度足够快，这可能会导致竞争条件。

initialize: function() {                    // UPDATED
    this.collection = new app.Library();    // UPDATED
    this.collection.fetch({
        reset:true});

    this.listenTo( this.collection, 'add', this.renderBook );
    this.listenTo( this.collection, 'reset', this.render ); // NEW

}

设置完视图集合后，绑定所有必要的事件，然后用它做任何事情：

initialize: function() {                    // UPDATED
    this.collection = new app.Library();    // UPDATED
    this.listenTo( this.collection, 'add', this.renderBook );
    this.listenTo( this.collection, 'reset', this.render ); // NEW

    this.collection.fetch({
        reset:true});
}