结合Require.js,Backbone.js和服务器端MVC框架

时间:2012-11-13 18:48:13

标签: codeigniter backbone.js server-side

我们实际上正在计划一个非常复杂的Web应用程序。至少对我自己的标准来说。 在过去,我们一直使用服务器端MVC框架(Codeigniter)和客户端功能(jQuery和插件)的组合。我们在视图中简单地编写了内联JavaScript代码。这按预期工作,但当然有几个缺点:

  • 没有缓存
  • 重复的js代码
  • 可维护性问题
  • ...

我现在的主要目标是以高效且易于维护的方式组织客户端代码。但是我想继续使用服务器端MVC,因为现有的知识和一些现有的接口。此外,我想用jQuery和“意大利面条代码”减少复杂的DOM操作。

现在我想到了Backbone.js和Require.js的组合,但是我真的找不到关于如何将它们与服务器端MVC结合起来的教程或任何可靠的描述。 甚至推荐吗?

在我的旧应用程序中,我得到了这样的文件结构:

  • application(CodeIgniter)
  • 资产
    • js
    • css
    • IMGS

有任何想法或最佳做法吗?

谢谢!

2 个答案:

答案 0 :(得分:4)

要添加mexique1的建议,可能值得查看backbone-boilerplate project。它应该为您正在考虑的许多问题提供最佳实践解决方案,例如需求和主干的组合,项目客户端的组织以及复杂DOM操作的减少(请参阅模板)

正如您所预料的那样,挑战很可能是将样板方法与您习惯的方法相结合。但是,它几乎肯定值得付出努力,因为它应该为这个和未来的项目提供坚实的基础。

答案 1 :(得分:3)

我认为Backbone是一个不错的选择,并且此处不需要。

要求只是帮助您组织源代码并可能提高性能。我认为你可以立即开始使用Backbone,这将是你最常用的东西,并在稍后添加Require。

关于Backbone,是的,只要它返回JSON,就可以很容易地将其Model与现有的MVC应用程序一起使用。要加载现有数据,您需要使用fetch方法合并到url以适应您现有的代码或您自己的方法。

通常,请考虑在哪些视图中显示哪些模型。 Backbone可以帮助您这样思考:我在视图中显示由HTML构成的JSON数据模型。

此外,对于视图层,重用现有HTML非常容易,因为视图不依赖于任何内容,没有JavaScript模板或任何内容。

简单示例:

<div id="user">
    <span class="name">John</span>
</div>

var UserView = Backbone.View.extend({
    render: function() {
        this.$el('.name').html(this.model.get('name'));
    }
});
var userView = new UserView({el: $('#user')[0], model: ...});

在此示例中,#user div反映了User模型的状态及其名称。

另请查看Backbone中的Todo App示例。