带有主干.js 的 DomReady

Question

我正在使用backbone.js 创建一个单页应用程序。我是主干新手，所以请原谅任何错误的语义。

我的问题是渲染视图时。

最初，我的 index.html 中有一个执行某些 dom 操作（图像滑块）的 javascript。

JS 包含在 $(window).load() 中，所以启动时一切正常。 除非从 url 加载页面，否则代码显然不会执行。代码不会从主干视图或路由器运行。所以页面在没有 dom 操作的情况下加载。

我尝试将我的代码插入到视图中的渲染和初始化函数中，但无济于事。我应该将此代码添加到路由器吗？这似乎有点骇人听闻。

我应该在哪里包含“dom ready”代码？ 和/或是否有更好的方法来管理主干中加载的视图及其 dom 元素？

代码：

home.js

window.HomeView = Backbone.View.extend({
initialize:function () {
    this.render();
},

render:function () {
    $(this.el).html(this.template());

    this.startOrbits();
    return this;
},



startOrbits:function(){
    $(window).load(function() {
        $('#orbit-main').orbit({ fluid: '16x6', swipe:true });
        $('#orbit-news').orbit({ fluid: '8x6', bullets: true, directionalNav:false, captions:true, advanceSpeed: 9000});
    });
},




});

Answer 1

我找到了解决方案。 在我的路由器函数中注释掉 if 语句后，事情进展顺利。

 home: function () {
            // if (!this.homeView) {
                this.homeView = new HomeView();
            // }
            $('#main-content').html(this.homeView.el);
            this.homeView.startOrbits();
            this.headerView.selectMenuItem('home');
        },

我确实意识到这意味着我会在每个溃败触发器上创建一个新视图。 请随时提供更优化的解决方案。

Answer 2

但是当我转到另一个视图，然后返回时，代码显然没有 兴奋

我不太确定这意味着什么。撇开“兴奋”的部分不谈，你不会“去”观点；视图只是向页面添加元素或向现有元素添加逻辑的方法。

如果我不得不猜测，我会想象您正在使用 Backbone 路由器在虚拟“页面”之间移动（并且您使用视图来制作这些页面）。如果是这种情况，您需要查看 Backbone 路由器事件：

http://documentcloud.github.com/backbone/#Router

http://documentcloud.github.com/backbone/#FAQ-events

具体来说，我认为您想将一个事件处理程序（在您的路由器上）绑定到“route:nameOfYourRoute”，或者只是 :route”（如果您想在每个虚拟页面加载时触发您的逻辑）。

希望对您有所帮助，如果我的猜测有误，请编辑您的问题以澄清。