Question

这是我目前的结构。

Folder Structure

main.js

require.config({
  paths: {
    jquery: 'libs/jquery/jquery-1.11.1.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    handlebars: 'libs/handlebars/handlebars-v1.3.0',
    templates : '../templates/',

  }

});

require([
  'app',
], function(App){
  App.initialize();
});

app.js

define([
  'jquery',
  'underscore',
  'backbone',
  'router',
  'handlebars'
], function($, _, Backbone, Router, Handlebars){
  var initialize = function(){

    Router.initialize();
  }

  return {
    initialize: initialize
  };
});

router.js

define([
  'jquery',
  'underscore',
  'backbone',
  'handlebars',
  'views/login',
  'views/home'
], function ($, _, Backbone, Handlebars, LoginBox, HomePage) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            'login': 'login',
            'home': 'home',
        },
        login: function () {
            var loginbox = new LoginBox();
            loginbox.render();
        },
        home: function () {
            var homepage = new HomePage();
            homepage.render();
        }
    });
    var initialize = function () {
        var app_router = new AppRouter;
        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

login.js

define([
  'jquery',
  'underscore',
  'backbone',
  'handlebars',
  'text!templates/login.html',
  'router'
], function ($, _, Backbone, Handlebars, loginHTML, router) {

    var LoginBox = Backbone.View.extend({

        el: $('.middle-container'),
        initialize: function () {
            this.router = require('router');    // MagiC
            this.router.navigate('home');       // Lines
        },
        render: function () {
            var data = {};
            var compiledTemplate = _.template(loginHTML, data);
            this.$el.append(compiledTemplate);
        },
        events: {
            "click #submit": "login"
        },
        login: function (event) {

            var url = 'http://192.168.1.132:3000/api/login/';
            var formValues = {
                username: $('#username').val(),
                password: $('#password').val()
            };
            console.log("sending " + formValues);
            $.ajax({
                url: url,
                type: 'POST',
                //dataType:"json",
                data: formValues,
                success: function (data) {
                    console.log(["Login request details: ", data]);

                    /*I've been doing more magic here*/
                    //Router.initialize();
                    //Backbone.history.navigate("home", true);
                    //that.navigate("home", {});
                    //routerddd = new that();
                    //routerddd.navigate("home");


                    if (data.error) { 
                        alert("Errrorrroror : " + data.error);
                    } else { 
                        //More error
                    }
                }
            });
        }
    });
    return LoginBox;
});

好吧，足够的代码。如果ajax调用在login成功，我一直在尝试将用户从home页面重定向到login.js页面。当ajax请求成功但无法将页面重定向到主页时，我收到控制台日志。但是我已经尝试了太多我现在无法解释的事情。因此，如果在ajax请求成功时配置require js或任何其他方式将用户导航到主页(calling route:home)时出现任何错误。请指导我。

感谢。

Answer 1

在成功回调函数中使用下面的代码。

Backbone.history.navigate("#/home");

它应该有用。

但我想你错误地认为骨干网与服务器的沟通方式。您应该使用Backbone.Model save（），fetch（），destroy（）函数与服务器集成。

你在requireJS中做得很好，只展示你想要从模块中公开的东西，这是一个很好的模式。

我认为您可以使用模型而不是Jquery Ajax。

请注意，Backbone使用jquery后台。

希望它有所帮助。

无法通过路由器在视图中调用另一个页面

1 个答案: