标签: backbone-routing

我是网络开发人员的新手,并被Meteor网站上的演示所震撼,并希望使用它.到目前为止我只使用了Google App Engine并且在主类中处理动态URL我会写这样的东西:

app = webapp2.WSGIApplication([('/[0-9]', HandlePost)], debug=True)

这会将最后带有数字0到9的任何URL映射到处理程序类,该处理程序类将使用模板引擎(如把手)为页面加载适当的数据.

我如何在Meteor中做类似的事情？

我有一个使用Backbone 0.5.3的工作应用程序,它不再使用主干0.9.2.

我发现Router.navigate()由于某种原因没有调用我的路由.

这是我的路由器:

var Router = Backbone.Router.extend({
    routes: {
      '/mypage': 'mypage', 
    },

    mypage: function() { 
      // show page ...
   }
});

像这样手动调用路由工作正常:

Router.mypage()

我还试图覆盖骨干的.navigate方法来调试我的应用程序...

var Router = Backbone.Router.extend({
    routes: {
      '/mypage': 'mypage', 
    },

    navigate: function(fragment, options) {
      console.log("navigate called");
      Backbone.history.navigate(fragment, options);
    },

    mypage: function() { 
      // show page ...
   }
});

......似乎.navigate被调用但是......

Backbone.history.navigate(fragment, options);

......只是不打电话给路线.

我正在使用PushState,这是我的初始调用:

Backbone.history.start({ 
  root: '/',
  pushState: true,
  silent: true
});

已经尝试过没有root和silent参数 - 没有成功.

再次:这使用Backbone 0.5.3.

感谢大家的回复!

阿希姆

我的应用程序基本上采取一些形式输入并返回一组结果.我有两条路线

routes: {
        '': 'search',
        'search': 'search',
        'results/:query': 'results'
    },
    results: function(query) {
        var search = new ResultsSearchView();
        var grid = new GridView({ query: query });
    }

如果查询包含任何字符/具体(在这种情况下可能完全发生),它们将被添加到URL并且我的路由中断.

我尝试过使用encodeURI(),encodeURIComponent()我没有运气.你们这些人怎么处理这些事情？

我正在尝试在Backbone 0.9.10中设置路由.我想匹配以下类型的路线:

/england/
/england/birmingham
/france
/france/paris
... 

这就是我目前在路由器中拥有的内容:

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "index",
    "(/:country)": "index",
    "(/:country)(/:city)": "index"
  },
  index: function(country, city) { 
      console.log('index', country, city);
  }
});
var StateApp = new AppRouter();
Backbone.history.start({ pushState: true });

我有两个问题:

1. "索引"功能目前根本没有触发,无论我转到的网址是什么/,/england或者其他什么.
2. 我也不清楚可选参数是否会按照我设置的方式工作 - 是否可以在这样的行中有两个可选参数？我不知道我还需要支持多少个国家,所以我确实希望country参数是一个参数,而不是指定各个国家.

如果可能的话,我宁愿使用正确的URL路由而不是正则表达式解析.

我有一个非常简单的骨干路由器,到目前为止一切正常.除非我重新加载/直接输入网址,即http://mydomain.com/#list/50fadc41125b0 我现在几乎尝试了所有内容而没有任何正面结果.

myRouter = Backbone.Router.extend({
    routes: {
        "list/:id": "getList",      
        "*actions": "defaultRoute" // not needed right now
    },
    getList: function (id) {
        console.log ("test");
    }
});

我也尝试过这种方式,没有任何区别

// init router
router = new myRouter;
router.on('route:getList', function (id) {
    [...]
});

我不知道怎么做这个工作!希望有人能给我一个答案!

编辑:

我也开始了历史

Backbone.history.start();

我已经使用构建了一个Web应用程序backbone.marionette.从a开始Marionette.ItemView,我触发事件document.location.hash:

 document.location.hash = '#tasks/' + this.model.get('id');

1.a)它改变URL 1.b)它触发appRoutes

如果我Routing.navigate从同一个地方触发:

router.navigate('#tasks/' + this.model.get('id'))

2.a)它按预期更改URL 2.b)它不会触发appRoutes.

知道为什么2.b会发生吗？问题在哪里？

谢谢.

var Router = Marionette.AppRouter.extend({
    appRoutes: {
        'tasks': 'tasks',
        'tasks/:id': 'taskDetail',
        '*defaults': 'tasks'
    }
});

我正在使用Backbone和Marionette.

我有一个链接<a>标记,我传递的参数很少,如何使用Backbone在其他页面中提取这些值？

<a href="http://localhost.com:8080/help/?name=matth&age=25&email=matt@gmail.com">View Details</a>

地址栏网址:

http://localhost.com:8080/help/?name=matth&age=25&email=matt@gmail.com 44

使用Php,这很简单:

$Url = $_GET['state']."#".$_GET['city']; 

如何在我的Backbone应用程序中实现它？

我的代码如下:

var AppRouter = Backbone.Router.extend({

    _data: null,
    _length: 0,
    _index: null,
    _todos: null,
    _subtodolist: null,
    _subtodos: null,

    routes: {
        "*action": "index",
        "category/:name": "hashcategory"  
    },

    initialize: function(options){
        var self = this;
        if (this._index === null){
            $.ajax({
                url: 'data/todolist.json',
                dataType: 'json',
                data: {},
                success: function(data) {
                    self._data = data;
                    self._todos = new TodosCollection(data);
                    self._index = new CategoriesView({collection: self._todos});
                    //self._index.render(); 
                }
            });
            return this;
        }
        return this;
    },

    index: function(){
        this._index.render();
    },
 ....

但是当我开始使用时,firebug控制台面板总是告诉我函数中this._index是null index.我必须self._index.render()在$.ajax success回调函数的底部使用以进行主页渲染(上面已注释掉).似乎 …

我有一个简单的路由器:

Erin.Router = Backbone.Router.extend({
    initialize: function() {
        Backbone.history.start({pushState: true});
    },
    routes: {
        '' : 'index',
        'project/:img' :'project',
    },
    index: function() {
        var galleryView = new Erin.GalleryView();
    },
    project: function(img) {
        console.log(img);
    }
}); 

Erin.GalleryViewis 的模板(认为​​可能存在问题):

<script type="text/template" id="gallery-grid">
        <a href="/project/<%= id %>">
            <img src="<%= thumbnail %>" />
            <span class="desc">
                <div class="desc-wrap">
                    <p class="title"><%= title %></p>
                    <p class="client"><%= client %></p>
                </div>
            </span>
        </a>
    </script>

GalleryView和GalleryItem代码.

Erin.GalleryItem = Backbone.View.extend({
    tagName: 'div',
    className: 'project-container',
    //Grab the template html
    template: _.template($('#gallery-grid').html()),
    //Set up …

所以我有一个使用Backbone路由器的反应应用程序,但当我尝试导航时DOMContentLoaded,我得到:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element. 

我已经尝试单步执行堆栈跟踪,但无法弄清楚发生了什么,因为抛出error(ReactMount._registerComponent)的方法被多次命中,其中前几个不会抛出错误,因为DOM元素有问题的是那里.我正在使用我在其他项目中使用的组件,没有问题,并且已经将所有部分剥离到最低程度以进行调试(到目前为止未成功):

DOM结构:

<html>
    <head>
    </head>
    <body>
        <div id="app-container">
        </div>
        <script src="http://fb.me/react-with-addons-0.12.0.js"></script>
        <script type="text/javascript" src="js/application.js"></script>
    </body>
</html>

使用路由器代码:

AppRouter.prototype.signIn = function () {
  var container = document.getElementById( 'app-container' );

  React.render(
    <LoginForm />,
    container
  );
};

LoginForm组件:

var LoginForm = React.createClass({
  render: function () {
    return(
      React.render(
        <div id="login-form-component">
        </div>
      )
    );
  },
});

路线被击中,LoginForm#render按预期击中 - 我错过了什么？

这是堆栈跟踪,其底部是我的路由器登录方法:

invariant 
ReactMount._registerComponent 
(anonymous function) 
ReactPerf.measure.wrapper …