Javascript Backbone.js应用程序完全以js呈现_Javascript_Backbone.js_Single Page Application

Javascript Backbone.js应用程序完全以js呈现

javascript backbone.js

Javascript Backbone.js应用程序完全以js呈现,javascript,backbone.js,single-page-application,Javascript,Backbone.js,Single Page Application,我试图在Backbone.js中构建一个新项目，我的背景是用Java、PHP、Rails、Perl等开发WebApp。我已经做了很多JS方面的工作，包括JQuery和一些Node，但是在主干网中构建整个应用程序的最佳实践方面，我有点困难。教程中的内容似乎与我所看到的实际应用程序的实现方式有所不同我一直在读艾迪·奥斯马尼的书。他的例子是创建一个静态HTML文件，将应用程序的框架放入其中，然后由JS修改。示例代码段：待办事项将所有标记为完整这是一个很好的问题，但不幸的是，这是一个非常开

我试图在Backbone.js中构建一个新项目，我的背景是用Java、PHP、Rails、Perl等开发WebApp。我已经做了很多JS方面的工作，包括JQuery和一些Node，但是在主干网中构建整个应用程序的最佳实践方面，我有点困难。教程中的内容似乎与我所看到的实际应用程序的实现方式有所不同

我一直在读艾迪·奥斯马尼的书。他的例子是创建一个静态HTML文件，将应用程序的框架放入其中，然后由JS修改。示例代码段：


待办事项
将所有标记为完整

这是一个很好的问题，但不幸的是，这是一个非常开放的问题。有，但我宁愿通过给你一个需要做什么的高层次概述来回答

您的问题所指的区别是HTML的呈现发生在哪里：全部在服务器端，全部在客户端，或者两者的混合

另一个（相关）问题是路由在哪里发生
最接近“所有客户端”的方法是一个服务器端面向用户的URL端点，该端点返回一个小的HTML响应，该响应本质上是客户端的引导程序，如本例所示：
得到/
我不想特别深入研究
require.js
，所以我只想指出它做了它看起来做的事情：它异步并以受控方式加载JavaScript（所以你说这个脚本依赖于那个脚本，等等）。第一块只是
require.js
的配置，有点离题，但我想让它变得现实
第二个街区更有趣。它是这样说的：

需要以下依赖项：jquery 和应用程序
加载它们后（从httpget 或从缓存（如果以前加载过），分别将它们别名为$ 和应用程序创建一个新的div ，并将其添加到body 创建一个新的应用程序指定rootEl 作为创建的div 在应用程序实例上调用start 下面是DOM在这一点上的外观： <html> <head> <title>Loading</title> <script data-main="/client/main" src="/client/libs/require.js"</script> <script data-requiremodule="main" src="/client/main.js"></script> <script data-requiremodule="jquery" src="/client/libs/jquery.js"></script>  <script data-requiremodule="application" src="/client/application.js"></script> </head> <body> <div id="application-root"></div> </body> </html> define 函数类似于require （它是require.js 的一部分），但它本身并不“运行”-require 运行。因此，无论您定义什么，都必须在别处运行 define 函数参数中的return 值是当您需要它时返回的值在这种情况下，getStartOptions 是私有的，但是返回的视图是从以前开始需要['application'] 的值大致情况如下：从前面开始，我们实例化这里定义的视图（我们称之为应用程序）我们称之为start start 将start 设置为true 当started 为true时，视图（通过listenToOnce 调用）设置初始选项第一次设置rootEl 时，我们将模板注入DOM 当选项更改时，我们会相应地更新视图，然后重新渲染在所有这些之后，结果将是： <body> <div id="app-root"> ... content of the template with id "app-layout-template" ... </div> </body> ... id为“应用程序布局模板”的模板内容。。。布局模板只需要采用这种形式 GET/client/templates.html ... 还有很多其他的选择 <html> <head> <title>Loading</title> <script data-main="/client/main" src="/client/libs/require.js"</script> <script data-requiremodule="main" src="/client/main.js"></script> <script data-requiremodule="jquery" src="/client/libs/jquery.js"></script>  <script data-requiremodule="application" src="/client/application.js"></script> </head> <body> <div id="application-root"></div> </body> </html> define(['underscore', 'jquery', 'backbone', 'text!templates.html'], function(_, $, Backbone, Templates) { var getStartOptions = function(options) { options = options || {}; _(options).defaults({ rootEl: $('body'), initialRoute: '/' }); return options; }; return Backbone.View.extend({ initialize: function(options) { this.state = new Backbone.Model(getStartOptions(options)); this.listenToOnce(this.state, 'change:started', function() { this.state.set(getStartOptions(options)); }, this); this.listenTo(this.state, 'change:rootEl', this.onChangeRootEl, this); }, onChangeRootEl: function(val) { this.setElement(val); if (!this.state.previous('rootEl')) { var $templates = $('<div>', {id: 'app-templates'}); $templates.html(Templates); $('body').append($templates); } this.render(); }, template: _.template($('#app-templates #app-layout-template').html()), render: function() { this.$el.html(this.template()); return this; }, start: function() { this.state.set('started', true); } }); }); <body> <div id="app-root"> ... content of the template with id "app-layout-template" ... </div> </body> <script type="text/whatever-you-want" id="app-layout-template"> ... </script> <script type="text/x-underscore-template" id="example-of-app-layout-template"> <header><h2><%= appTitle %></h2></header> <section><%- appContent %></section> <footer><p><%= appFooterMessage %></footer> </script>