标签: backbone-routing

将Backbone.Router.navigate设置test为true:

var test = false;

var Router = Backbone.Router.extend({
  routes: {
    'posts': 'showPosts'
  },
  showPosts: function () {
    test = true;
  }
});

router = new Router();
Backbone.history.start();

router.navigate('posts?foo=3', {trigger: true});

assert.ok(test);

例如,默认情况下posts?foo=3片段是否与posts路径匹配,或者我是否必须为此设置另一条路径,例如:posts?*querystring？

谢谢

PS:我知道存在骨干查询参数,但我想知道骨干.

我在几个地方读过,调用Backbone.history.navigate函数被认为是不好的做法.

例如Addy Osmani sais在他的书"开发Backbone.js应用程序"中

Router.navigate()也可以通过传递trigger:true选项来触发路由以及更新URL片段.注意:不鼓励这种用法......

http://addyosmani.github.io/backbone-fundamentals/#backbone.history

或者Derick Bailey在他的博客文章中甚至是sais:

在大多数情况下,您不应该在应用程序中执行路由的处理程序.

但我真的不明白它背后的原因以及什么是更好的解决方案.

在我看来,使用trigger:true选项调用导航功能并不是很糟糕.路由功能可以在调用时始终检查所考虑的数据是否已加载并显示此加载的数据,而不是重新执行整个工作...

Backbone.js中的路由器负责路由客户端页面,并根据URL将它们连接到操作和事件.但是如何触发网址更改呢？我的意思是,如果这样做的唯一方法是将与页面路由关联的元素包含在<a>标记中.

因为我已经将mousedown和mouseup事件与用于路由的元素相关联,所以如果我将它放在<a>tag中,mousedown和mouseup事件肯定会变得无效,因为它会与<a>tag 的click事件冲突.那么还有其他方法可以进行路由吗？

我有一个骨干应用程序,我需要知道从中访问当前路由的路由器.可能吗？

例如: -

我#/current来自#/test1,也来自另一个例子#/test1.

所以我可以通过某种方式来检测以前的路由器命中吗？

我使用过:

Backbone.history.fragment

这只会给我当前的路线,而不是从哪条路线.

当我想从路由器类初始化视图时,我收到此错误.

错误是:未捕获TypeError:对象#没有方法'_ensureElement'

BlogFormView:

App.BlogFormView = Backbone.View.extend({
    el: ".data-form",
    initialize: function(){
        this.template = _.template($("#blog_form_template").html());
        this.render();
    },
    render: function(){
        this.$el.html(this.template({blog: this.model.toJSON()}));
        return this;
    },
    events: {
        "click .submit-blog" : "submitForm"
    },
    submitForm: function(ev){

    }
});

路由器:

var blog = new App.Blog();
var blogFormView = App.BlogFormView({model: blog});

这是我在BackBone.js上工作的最初时期.我实际上卡在路由器部分,因为我在控制台中收到错误"错误:必须指定url属性或函数".这是我的情景; 我有一个动态形成REST URL的点击功能,并相应地从服务器获取数据.

这是点击功能代码

function onUserClick(obj){
     var userID=$(obj).attr('id');
     window.location.href="#"+userID+"/";
     var userRouter = new UserRouter;
}

我在路由器中有以下代码

var userModel;
var UserRouter = Backbone.Router.extend({
    routes:{
        ":userid/":"getUsers"
    },
    getUsers:function(userid){
        var url="http://myserver.com/users/"+userid;
        userModel = new UserModel({urlRoot:url});
        var userView = new UserView({el:$(#"container")});
    }
});
var UserModel = Backbobe.Model.extend({});
var UserView = Backbone.View.extend({
    model:userModel,
    initialize:function(){
        _.templateSettings = {
            interpolate: /\{\{\=(.+?)\}\}/g,
            evaluate: /\{\{(.+?)\}\}/g
        };
        this.model.fetch();
        this.model.bind("change",this.render,this);
    },
    render:function(){
        var data=this.model.toJSON();
        var userTemplate=_.template($("#userTemplate").text());
        var htmlData=userTemplate({
            "userData":data
        });
        $(this.el).html(htmlData);
    }
});

有人可以帮我解决这个问题吗？我知道我在这里做错了什么,并就此寻求专家意见.非常感谢这种情况的一个woking样本.

这是我的application-router.js文件,我Backbone.Router只用几条路线创建对象:

var App = App || {};

App.Router =  Backbone.Router.extend({
    routes : {
        ''      : 'showDashboard', // Not shown
        '*other': 'showModalError'
    },
    defaultRoute : function(other) { $('#modal404').modal(); }
});

在主javascript文件中,application.js我想以编程方式添加路由.我已尝试使用route()函数,但它不起作用,不添加路由.然而它将一个对象传递给"构造函数",但是它会覆盖已定义的路径:

// This works and overrides all defined routes in App.Router
var router = new App.Router({ routes : { '/test/me' : 'testRoute' } });

// This is not working
router.route(ExposeTranslation.get('customers.new.route'), 'newCustomer');
router.route('/test/me/again', 'testAgainRoute');

实际上console.log(App.Router)表明:

routes Object { /test/me="testRoute"}

我想我错过了一些我无法弄清楚的东西,我开始学习这一小块强大的javascript.

我打算对拥有30多个模块的应用程序使用backbone + require.我没有为每个模块创建单独的路线,而是计划创建这样的东西.

不确定这是最佳做法.请指导.

routes: {
  ":module"                   : "routeLevelOne",
  ":module/:id"               : "routeLevelTwo",
},

routeLevelOne: function(module){
    require(['views/' + module + 'View',],
        function(){
          require('views/' + module + 'View').render();  
       }
    );
},

routeLevelTwo: function(module, id){
    require(['views/' + module + 'View',],
        function(){
          require('views/' + module + 'View').renderWithId(id);  
       }
    );
},

我遇到以下情况.

我使用requireJs来加载模块,我不想使用全局变量.

main.js负责加载路由器.
然后路由器加载应用程序,应用程序加载几个subApps.

一切都已初始化后,subApps需要router制作router.navigate.

架构:

main.js -> router -> app -> subApp -> router

然后我遇到循环依赖的问题,因此subApp中的路由器将是未定义的.

重新组织代码或解决此问题的最佳方法是什么？有关于此的一些例子吗？

我正在尝试实现{ pushState : true }它,但它只适用于基本路由,而不是与另一个继续给我错误404.

在Chrome中,如果我访问:

http://example.app/ - 确定显示控制台消息

http://example.app/show - 返回错误404

我的路线是

    var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'index',
            'show': 'show'
        },

        index: function() {
            console.log('This is the index page');
        },
        show: function() {
            console.log('This is the show page');
        }

    });

    new AppRouter;
    Backbone.history.start({pushState: true});

我的.htaccess

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
   RewriteRule (.*) index.html [L]
</ifModule>

我错过了什么,或者我做错了什么？