Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript pushState阻止主干.js路由工作_Javascript_Backbone.js_Pushstate - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript pushState阻止主干.js路由工作

Javascript pushState阻止主干.js路由工作

javascript backbone.js

Javascript pushState阻止主干.js路由工作,javascript,backbone.js,pushstate,Javascript,Backbone.js,Pushstate,我在RequireJS/Backbone.js应用程序中遇到HTML5 pushState问题，我很确定我做错了什么，但我无法确定问题所在，我已经尝试了几个小时 前言：所有RequireJS依赖项都在正确的文件夹中 这是我的问题：我有一个基本的小设置-我使用的唯一主干组件是路由器。在默认“”路由上，我调用路由器中的“home”方法。这个方法只做了一个警报“测试”，而且很有效 但是，一旦我将{pushState:true}作为参数添加到顶级app.js文件中的Backbone.history.st

我在RequireJS/Backbone.js应用程序中遇到HTML5 pushState问题，我很确定我做错了什么，但我无法确定问题所在，我已经尝试了几个小时

前言：所有RequireJS依赖项都在正确的文件夹中

这是我的问题：我有一个基本的小设置-我使用的唯一主干组件是路由器。在默认“”路由上，我调用路由器中的“home”方法。这个方法只做了一个警报“测试”，而且很有效

但是，一旦我将
{pushState:true}
作为参数添加到顶级
app.js
文件中的
Backbone.history.start（）
，将不再调用“home”方法

以下是发生这种情况的代码块：

index.html：

<!doctype html>
<html>
  <head>
    <title>Todo</title>
    <script data-main="assets/js/app/app.js" src="assets/js/app/lib/require.js"></script>
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>
router.js：

define(['backbone'], function(Backbone) {
  var Router = Backbone.Router.extend({
    routes: {
      '': 'home'
    },
    home: function() {
      alert('test');
    }
  });
  return Router;
});
我做错了什么？这是一个错误的、复杂的方法吗？

我已经想出了一个解决我自己问题的办法，真有趣

实现pushState的问题是，对于任何要工作的路由，即使是默认的主路由，都需要一个后端服务器来最初呈现页面，以便主干网可以在检查路由后触发正确的JavaScript

这意味着开发本地实例并使用
文件：//
协议导航到它将不起作用。（这就是我在上述问题中犯的错误）

对于这个简单的用例，我编写了一个简单的ExpressJS服务器，当遇到任何通配符路由时，它提供一个index.jade视图（我删除了index.html），然后允许主干正确地用这个小代码片段呈现路由：

app.get('*', function(req, res) {
  res.render('index');
}
但是，如果您希望支持搜索引擎爬网，则必须进行进一步的更改，这些更改包括使用特定于路由的服务器端版本的视图，以便在直接访问路由的情况下，服务器可以呈现这些视图。如果您不希望支持SEO爬网功能，例如在需要用户登录的web应用程序中，则可以通过单个渲染文件重新路由所有路由。主干足够智能，可以检测剩余的路由路径以渲染适当的视图。这是在

请注意，使用真实的URL需要web服务器能够正确呈现这些页面，因此也需要进行后端更改。例如，如果您的路径为/documents/100，则如果浏览器直接访问该URL，您的web服务器必须能够为该页面提供服务。对于完整的搜索引擎爬行能力，最好让服务器为页面生成完整的HTML。。。但是如果它是一个web应用程序，只需呈现与根URL相同的内容，并用主干视图和JavaScript填充其余内容就可以了

注意：使用pushState可能会暗示锚定标记（
如何发布此类事件处理程序的示例作为对

完整代码更改：

/app.js


var
express = require('express'),
app = express();

app.configure(function() {
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.static(__dirname + '/assets'));
  app.use(app.router);
  app.locals.pretty = true;
});

app.get('*', function(req, res) {
  res.render('index');
});

app.listen(3030, function() {
  console.log("Listening on 3030");
});



require.config({
  baseUrl: '/js/app',
  paths: {
    'underscore': 'lib/underscore',
    'jquery': 'lib/jquery',
    'backbone': 'lib/backbone',
    'text': 'lib/text',
    'handlebars': 'lib/handlebars',
    'router': 'router/router'
  },
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});
require(['router', 'backbone'], function(Router, Backbone) {
  var router = new Router();
  Backbone.history.start({pushState: true});
});



define(['backbone', 'jquery'], function(Backbone, $) {
  var Router = Backbone.Router.extend({
    routes: {
      '': 'home',
      'fred': 'fred'
    },
    home: function() {
      $('#main').append('<p>This is the <strong>HOME</strong> route.');
    },
    fred: function() {
      $('#main').append('<p>This is the <strong>FRED</strong> route.');
    }
  });
  return Router;
});


/assets/js/app/app.js


var
express = require('express'),
app = express();

app.configure(function() {
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.static(__dirname + '/assets'));
  app.use(app.router);
  app.locals.pretty = true;
});

app.get('*', function(req, res) {
  res.render('index');
});

app.listen(3030, function() {
  console.log("Listening on 3030");
});



require.config({
  baseUrl: '/js/app',
  paths: {
    'underscore': 'lib/underscore',
    'jquery': 'lib/jquery',
    'backbone': 'lib/backbone',
    'text': 'lib/text',
    'handlebars': 'lib/handlebars',
    'router': 'router/router'
  },
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});
require(['router', 'backbone'], function(Router, Backbone) {
  var router = new Router();
  Backbone.history.start({pushState: true});
});



define(['backbone', 'jquery'], function(Backbone, $) {
  var Router = Backbone.Router.extend({
    routes: {
      '': 'home',
      'fred': 'fred'
    },
    home: function() {
      $('#main').append('<p>This is the <strong>HOME</strong> route.');
    },
    fred: function() {
      $('#main').append('<p>This is the <strong>FRED</strong> route.');
    }
  });
  return Router;
});


/assets/js/app/router/router.js


var
express = require('express'),
app = express();

app.configure(function() {
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.static(__dirname + '/assets'));
  app.use(app.router);
  app.locals.pretty = true;
});

app.get('*', function(req, res) {
  res.render('index');
});

app.listen(3030, function() {
  console.log("Listening on 3030");
});



require.config({
  baseUrl: '/js/app',
  paths: {
    'underscore': 'lib/underscore',
    'jquery': 'lib/jquery',
    'backbone': 'lib/backbone',
    'text': 'lib/text',
    'handlebars': 'lib/handlebars',
    'router': 'router/router'
  },
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});
require(['router', 'backbone'], function(Router, Backbone) {
  var router = new Router();
  Backbone.history.start({pushState: true});
});



define(['backbone', 'jquery'], function(Backbone, $) {
  var Router = Backbone.Router.extend({
    routes: {
      '': 'home',
      'fred': 'fred'
    },
    home: function() {
      $('#main').append('<p>This is the <strong>HOME</strong> route.');
    },
    fred: function() {
      $('#main').append('<p>This is the <strong>FRED</strong> route.');
    }
  });
  return Router;
});



我遇到了同样的问题，试图弄清楚为什么我的主干学习项目都能工作，但卓别林的基本样板文件却不能。他们在构建路由器时选择了pushState:true。弄清楚为什么这样做是可取的可能需要再读几个小时，但我真的很喜欢把所有文件都放在file://url上的简单性没有任何服务器，尤其是当我的代码需要在PhoneGaphan之类的东西中可移植时，我甚至还没有在卓别林尝试过，但我相信你可以覆盖它，不是吗？是的，很容易做到，在花了很长时间逐级检查代码试图弄清楚发生了什么。好吧，至少是一个很好的学习练习。