2013-02-01 157 views
8

我正在处理Backbone.js,但有一件事我不明白是在哪里放置我需要设置我的页面的所有一次性jQuery代码。Backbone.js:我在哪里放置jQuery设置?

你知道这样的事情:配置一个jQuery轮播插件,添加一个'scroll to top'箭头......当用户第一次加载页面时发生的一次性配置。

当时我正在做我的路由器的时刻:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
    // some routes 
    }, 
    initialize: function() { 
    initializeJqueryStuff(); 
    } ... 
}); 
var StateApp = new AppRouter(); 
Backbone.history.start({ 
    pushState: true 
}); 
function initializeJqueryStuff() { 
    // one-off jQuery stuff goes here 
} 

Yeuch。我应该怎么做呢? initializeJqueryStuff应该是Router对象的另一个属性吗?应该都住在initialize里面吗?或者我应该将这些代码与Backbone应用完全分开吗?

+0

你能给我什么需要在页面加载/应用程序来实现启动的jQuery代码的例子吗?我通常在视图中使用jQuery代码。因此,根据你想要实现的内容,你可能会有一个“布局视图”在视图渲染后触发你的jQuery代码。如果你能让我知道什么样的jQuery代码需要在应用程序启动时初始化,那么我会再次提供帮助。 – TYRONEMICHAEL

回答

1

我通常定义一个LayoutView,即负责呈现应用程序中所有“实际”视图的根视图。在任何其他视图代码需要运行之前,此布局视图仅初始化一次。这也是我倾向于做任何一次性视图配置的地方。

样品:

//LayoutView should be considered a singleton, only initialized once 
var LayoutView = Backbone.View.extend({ 
    el:'body', 

    initialize: function() { 
     this.initializeSomejQueryStuff(); 
    }, 

    renderChild: function(child) { 
     if(this._currentChild) 
      this._currentChild.remove(); 
     this._currentChild = child; 
     this.$el.html(child.render().el); 
    }, 

    initializeSomejQueryStuff: function() { 
     //init here 
    } 
}); 

用法:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "foo/:id": "foo" 
    }, 

    initialize: function() { 
     this.layout = new LayoutView(); 
    }, 

    foo: function(id) { 
     var model = new Foo({id:id}); 
     var view = new FooView({model:model}); 

     //delegate the view rendering to a layout 
     this.layout.renderChild(view); 
    } 
}); 
+0

有趣的方法,谢谢! – Richard

0

嗯...抱歉,如果我错过了一些细节,以防我英语不好。但是,我可以看到你的问题的主要观点:你可以在哪里配置和放置jQuery的东西,而不是与Backbone相关联?在所有你可以分开这个代码,只是链接在.html

骨干只是一点点的MVC。你可以操纵你的渲染函数和一些与视图相关的js东西,但是总的来说,我认为为不同的事物创建不同的结构是一个很好的观点。水木清华这样的:

.../ 
    public/ 
     css/ 
     img/ 
     lib/ 
      ..any source code for your plugins.. 
     tpl/ 
      ..for your templates.. 
     js/ 
      models/ 
       models.js 
      views/ 
       ..your views.js.. 
      main.js(your backbone router and for example, .loadTemplate() func for templates and other) 
      ..any code for plugings configuration.. 

使我认为结构可以有助于理解什么是源带你去编码清楚什么和。

希望它对你有帮助。对不起,如果我误解了。

+0

好的,谢谢。我的问题是,我需要在Backbone开始之前在jQuery中加载所有内容(因为我的Backbone视图有一些事件依赖于正确初始化的jQuery元素)。如果我在'$(document).ready()'内部包装jQuery文件和Backbone文件,我可以确保所有内容都按正确的顺序加载吗? – Richard

+0

@Richard Ahhhh ....我明白了。如果只有视图依赖于一些jQuery元素。在链接视图之前,只需将该元素放置在位置之前,逐步阅读文档流程。首先在html中,首先加载。加载队列在不同的浏览器中是不同的,但是不会有问题导致它们都像流一样。玩它并尝试:) – Pruntoff