如何在Backbone中呈现JSP页面

Posted 2021-05-05

我创建了一个骨干项目，所有的html现在都转换成了jsp页面。

如果我在URL中使用相应的页面jsp名称，我可以加载页面。

例如

localhost:8080/abc/index.jsp || localhost:8080/abc/landing.jsp

但我面临的问题是，如果我有内部页面路由，例如

考虑一个登录页面，忘记了密码链接，如果我点击它应该重定向到忘记密码页面，这不会发生。

使用window.location.pathname = "/abc/landing.jsp"进行导航

手动我是这样做的，有没有一种正确的方法来实现jsp页面导航。请帮忙。

代码：forgotpassword.jsp：

<input type="hidden" value="forgotPassword">
<div id="fp"></div>

基于输入隐藏参数，我决定需要渲染哪些新东西。并且url的形成是http://localhost.abc.com:8080/test/forgotpassword.jsp

这是我的路由器逻辑：

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {

    var AppRouter = Backbone.Router.extend({
        routes: {
            '*': 'default'
        },
    });

    var initialize = function() {
        var apRouter = new AppRouter;
        apRouter.on('route:default', function() {
            if ($('input').val == "fp") {
                require(['forgotpasswordView'], function(ForgotPswrd) {
                    var fpwrd = new ForgotPswrd();
                    fpwrd.render();
                });
                else {
                    require(['indexView'], function(IndexView) {
                        var iView = new IndexView();
                        iView.render();
                    });
                }
            }
        });
        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

所以，如果我手动点击URL附加相应的jsp名称，如

http://localhost.abc.com:8080/test/forgotpassword.jsp or 

http://localhost.abc.com:8080/test/index.jsp

然后页面加载并正常工作。但是，如果从另一个视图调用另一个视图，那么它就失败了。

像landing.html：

<button id="goTo"> Go to Next View </button>

登陆视图JS：

events : "click#goTo : goTo"

goTo : function(evt){
   evt.preventDefault();
   Backbone.history.navigate('/',true);
}

现在忘记密码页面需要加载但是网址没有改变只是将哈希附加到前一个网址那里有什么。

请帮助。

答案

Backbone依靠路由器来实现导航。因此，如果您在骨干路由中定义了路由，则可以通过使用骨干路由对象直接调用路由来导航到它。在您的情况下，您可以为密码忘记链接创建路由，在该路线的函数def中加载模板或视图。触发ROUTE'ON CLICK'.Eg：

var AppRouter = Backbone.Router.extend({
    routes: {
        '*': 'default',
        '/forgotpassword' : 'forgotPass' 
    },
});

var appRoute = new AppRouter;

forgotPass() {
// load the view here
}

$('#button').on('click',function() {
  appRoute.navigate('/forgotpassword',true);
});

请注意，您无法通过主干js加载jsp页面，因为在呈现html之前需要转换jsp文件，这在客户端无法完成。因此，您可以选择使用像车把js这样的模板引擎，并在必要时使用车把模板渲染视图。