Question

我正在构建我的第一个Ember应用程序。我的理解是Ember doesn't have window-level bindings。但是，我的布局要求调整一些内容以适应当前窗口。

我可以绑定到window.resize（）事件，回调按预期工作。但是，我还需要在pageload上调用该函数作为布局初始化的一部分。它会成功触发并返回，但是，似乎没有任何事情发生（即，不会发生css更改，元素不变）！我认为这可能是因为我的元素在一个把手模板的侧面，但即使是针对该元素也不起作用：

的index.html

<body>
<script type="text/x-handlebars" data-template-name="index">
    <div id="splash-pane">
            <div class="welcome-bar"></div>
            <div class="welcome-bar"></div>
            <div id="splash-logo"></div>
    </div>
</script>
        <script src="jquery.min.js"></script>
        <script src="js/handlebars-1.1.2.js"></script>
        <script src="js/ember-1.7.0.js"></script>
        <script src="js/ember-data.js"></script>
        <script src="js/lib/bootstrap.js"></script>
        <script src="js/application.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/router.js"></script>
        <script src="js/views.js"></script>
</body>

的application.js

var App = Ember.Application.create({
    LOG_TRANSITIONS:true,
    BOOTSTRAPPED: BS.init(),
});

bootstrap.js

window.BS = {
    init: function() {
        var initStatus = true;
        var sitRep = {
            scaleSplash: BS.scaleSplash(),
            jqBinds:BS.jqBinds()
        };

        for (initEl in sitRep) {
            if (!(sitRep[initEl] === true)) {
                initStatus = false;
                throw "Bootstrap failed. We're probably under attack. Hide 'ya kids."
            }
        }
        return initStatus;
    },
    jqBinds: function() {
        $(window).on("resize", BS.scaleSplash);
        return true;
    },
    scaleSplash: function() {
        var winH = window.innerHeight;
        var winW = window.innerWidth;
        // set base size to 1/3 of smallest window dimension
        var logoBase = (winH * 0.33) > (winW * 0.33) ? winW * 0.33 : winH * 0.33;
        $("#splash-logo").css({
            height:logoBase+"px",
            width:logoBase+"px",
            marginTop:String((winH - logoBase)/2)+"px"
        });

        return true;
    }
}

Answer 1

您应该在渲染模板后进行初始化。您可以使用视图中的didInsertElement事件执行此操作。例如：

App.IndexView = Ember.View.extend({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, BS.init);
  }
});

更多信息：http://emberjs.com/api/classes/Ember.View.html#event_didInsertElement ＆安培;关于scheduleOnce：http://emberjs.com/guides/understanding-ember/run-loop/

Ember.js：bootstrap的jQuery绑定无法正常工作

1 个答案: