Question

这是我设置的示例页面，其中#blueSquare div在渲染骨干视图后可见。即使代码是在创建视图之前放置的。我希望看到蓝色方块能够立即显示，而不是在（强制长时间）渲染视图之后显示。我的目标是在创建视图之前创建一个加载微调器，并在渲染视图后隐藏。但我不明白这个问题。

<style>

#blueSquare
{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background: blue;
    display: none;
}

</style>

<script type="text/javascript" src="js/ext/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/ext/underscore-min.js"></script>
<script type="text/javascript" src="js/ext/backbone-min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    TestView = Backbone.View.extend(
    {
        initialize: function()
        {
            console.log('initialize view');
            for (var i = 0; i < 1000000000; i++)
            {
                var t = Math.sqrt( i );
            }
            this.render();
        },
        render: function()
        {

            console.log('render view');
            //$('#blueSquare').hide();
        }
    });

    $('#blueSquare').show();
    var testView = new TestView();

});

</script>

<div id="blueSquare"></div>

Answer 1

最简单的解决方案是推迟创建视图以允许DOM刷新。您可以通过将视图创建包装在_.defer()

中来完成此操作

$('#blueSquare').show();
_.defer(function(){
    var testView = new TestView();
});

关于原因的解释，请参阅Why is setTimeout(fn, 0) sometimes useful?

为什么骨干视图在早期代码之前呈现？

1 个答案: