标签: backbone-boilerplate

我有一个奇怪的问题,我还没有弄清楚.这很简单,这可能就是我遇到麻烦的原因:)

首先,这是路由表......

routes: {
    '': 'root', //called
    'report': 'report', // called
    'report/add': 'reportAdd', // not called
    'report/print': 'reportPrint', // not called
    'report/settings': 'reportSettings', // not called
},

你会看到我标记哪些是有效的,哪些不是.问题归结为所有子路由(即report/add)不匹配.

在main.js中正确调用骨干历史记录,如下所示:

app.Router = new Router();
Backbone.history.start({ pushState: true });

显然,这是在正确的位置,因为路线工作不是子路线.我已经尝试过没有运气的root选择Backbone.history和沉默parameter.

我想这是一个配置/设置问题,但我找不到任何答案.我究竟做错了什么？任何帮助深表感谢.

顺便说一下,我使用的是requirejs和Backbone Boilerplate,但我不知道这会有什么影响.

更新:虽然提供的答案在技术上是正确的,但问题在于Backbone Boilerplate.有关说明,请参阅此博客文章的底部.我和那里的第一个评论者有同样的问题.

因此,我们正在每周发布我们的项目,并且我们遇到的问题是客户端有旧版本的某些文件.

堆栈是主干,带有主干样板的requirejs和带有PHP后端的Apache2服务器.

我们有加载的索引html文件,使用AJAX加载的模板HTML文件,然后是所有js文件.

这个问题似乎与/sf/ask/847233901/有关,但我没有看到一个好的答案.

我听说PHP的缓存控制头和mod过期以及mod头可能会有所帮助,但我不知道如何将它们放在一起.

从本质上讲,我们要做的是确保向prod服务器发布新代码,确保所有内容都不会被缓存一次.在此之后,正常缓存以提高加载速度将是理想的.

至少,我会理解如何完全阻止这些东西被缓存.

有任何想法吗？

我正在使用RequireJS,骨干样板和布局管理器,JamJS来帮助管理包,一切都在开发中运行良好,但是当我尝试创建带有连接文件的生产版本时它不起作用.

看起来shim我的配置可能没有加载.例如,我在控制台中遇到的错误是Uncaught TypeError: Cannot set property 'cookie' of undefined,因此jQuery没有作为jquery.cookie的依赖项加载.这是我的应用配置:

// Set the require.js configuration for your application.
require.config({

  // Initialize the application with the main application file and the JamJS
  // generated configuration file.
  deps: ["../vendor/jam/require.config", "main"],

  paths: {
    baseUrl : '/',
    config : "config",

    // JavaScript folders.
    api : "libs/api",
    app : "app",

    // Libraries.
    almond : "../vendor/jam/js/libs/almond",
    engagement : "libs/engagement",
    environment : "libs/environment",
    jquery : "../vendor/jam/jquery/jquery",
    jqueryui : "../vendor/js/libs/jquery-ui-1.9.1.custom.min",

    "jquery-cookie" : "../vendor/jam/jquery-cookie/jquery.cookie",

    chosen : …

我使用的是Backbone Boilerplate https://github.com/tbranyen/backbone-boilerplate,不知道处理多个页面的最佳方法是什么.我找不到能帮助我轻松理解的答案.基本上,我在考虑这些选择:

1. 每个页面应该有不同config.js吗？喜欢config-userpage.js,config-homepage.js......？
2. 我应该router.js为不同的页面改变不同吗？喜欢router-userpage.js或者router-homepage.js......？
3. 我应该尝试不同的样板,如https://github.com/hbarroso/backbone-boilerplate吗？

我正在使用骨干样板来渲染我的模板,它的fetchTemplate方法缓存渲染的模板.

我想在渲染的内容上运行一些额外的代码,比如初始化手风琴等,但是使用异步编译模板执行此操作比我想象的要复杂得多.

这是一个例子:

Duel.Views.Home = Backbone.View.extend({
  template: "/templates/duel_home.jade",
  render: function() {
    var view = this;
    statusapp.fetchTemplate(this.template, function(tmpl) {
      $(view.el).html( tmpl({duels: view.collection.toJSON()}) );
      view.postrender();
    });
    return this;
  },
  postrender: function() {
    $('#duel-new').each(function() {
      console.log('Found something')
    });
  }
});

除此之外,我使用http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/中概述的视图处理程序.

我这样做了

var view = Duel.Views.Home({model: mymodel})
viewHandler('#content').showView(view)

这个电话

$('#content').html(view.render().el)

但是,当模板尚未缓存时,首先调用render,然后按时调用postrender.另一方面,当模板已经被缓存时,模板立即呈现,后期调用被调用,但view.el尚未插入到DOM中,因此$(this.el)是一个空列表,而$('#duel -new').each()是"无效的".

当然,我可以在viewHandler的render调用之后添加postrender方法,但这会导致同样的问题,但是在第一次调用render方法时.由于模板尚未编译,因此在其元素存在之前调用postrender,因此不能在这些不存在的元素上定义处理程序.

关于如何正确克服这个问题的任何想法？例如,对于使用.on的简单点击事件来说,这是相对简单的,但是更一般的结构$('#tabs').tabs()呢,例如？

我的fetchTemplate函数如下:

fetchTemplate: function(path, done) {
  window.JST = window.JST || {};

  // Should be an instant synchronous way of getting the template, if it …

有人能告诉我在Backbone Boilerplate(https://github.com/tbranyen/backbone-boilerplate/blob/master/index.html)的index.html中条件评论的重要性吗？

<!--(if target dummy)><!--> <link rel="stylesheet" href="/app/styles/index.css"> <!--<!(endif)-->

<!--(if target release)> <link rel="stylesheet" href="index.css"> <!(endif)-->

<!--(if target debug)> <link rel="stylesheet" href="index.css"> <!(endif)-->

<!--(if target dummy)><!-->    <script data-main="/app/config" src="/vendor/js/libs/require.js"></script>    <!--<!(endif)-->

<!--(if target release)>    <script src="require.js"></script>    <!(endif)-->

<!--(if target debug)>    <script src="require.js"></script>    <!(endif)-->

在构建不同版本时,它们与Grunt有关吗？

谢谢..

我正在努力学习骨干,但是要说实话,我感觉有点不知所措.在任何地方,我看都是以稍微不同的方式完成的,每个都有更多的框架和插件来学习.所以我决定放下我对Addy Osmani的信仰,并正在阅读他的Backbone Fundamentals书.我遵循了他的建议并使用了Backbone-Boilerplate.但无论出于何种原因,我无法成功安装Grunt BBB,因此无法下载工作示例.

我想要做的是遵循此路由器部分并使用视图.http://addyosmani.github.com/backbone-fundamentals/#router.js.

问题是我认为这些说明不完整.首先,collection.fetch()变量的范围是错误的,我真的不明白我需要放置视图的位置和方式.我很确定如果我能看到一个可行的例子,我可以理解它,但正如我所说,到处都是我看到的不同的实现.

有谁知道如何使用带有路由器和视图的骨干 - 样板？在任何地方都有工作示例吗？