Backbone JS自动路由回默认值

时间:2012-10-02 21:21:45

标签: javascript backbone.js backbone-routing

我刚开始为Backbone JS SPA(单页面应用程序)开展基础工作。我正在使用基本的Underscore模板支持,并且遇到意外路由问题。

基本上,注册视图最初按预期显示,当我单击按钮时,POST成功,我将其导航到一个简单的测试视图。但是,快速呈现测试视图,然后我再次重新路由到默认注册视图。

我看到测试页面的历史记录,如果我点击后退按钮,我会回到测试视图,该视图工作正常。我看到在Backbone中触发了一些事件,它将我回到空白片段(注册页面),但我不知道为什么。我已经尝试搞乱导航调用中的替换和触发选项而没有运气。

作为旁注,start()和stop()View函数改编自本文:http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/。我尝试删除它并且它没有效果。

$(document).ready( function(){

     Backbone.View.prototype.start = function() {
         console.debug('starting');
         if (this.model && this.modelEvents) {
            _.each(this.modelEvents,
                function(functionName, event) {
                    this.model.bind(event, this[functionName], this);
                }, this);
        }
         console.debug('started');
        return this;
     };

     Backbone.View.prototype.stop = function() {
         console.debug('stopping');

        if (this.model && this.modelEvents) {
            _.each(this.modelEvents,
                function(functionName, event) {
                    this.model.unbind(event, this[functionName]);
            }, this);
        }
        console.debug('stopped');
        return this;
    };

    var myApp = {};

    myApp.SignUp = Backbone.Model.extend({
        urlRoot:"rest/v1/user",

        defaults: {
            emailAddress: "email@me.com",
            firstName: "First Name",
            lastName: "Last Name",
            password: "",
            confirmPassword: ""
          }
    });


    myApp.SignUpView = Backbone.View.extend({

         el: $('#bodyTarget'),

         modelEvents: {
             'change' : 'render'
         },

         render: function(){
             document.title = "Sign Up Page";

             // Compile the template using underscore
             var template = _.template( $("#signUpTemplate").html(), this.model.toJSON());
             // Load the compiled HTML into the Backbone "el"
             this.$el.html( template );
             return this;
         },

         events: {
             "click .signUpButton": "signUp"  
         },

         signUp: function() {
             bindFormValues(this);
             this.model.save(this.model.attributes, {error: this.signUpFailure});
             myApp.router.navigate("test",  {trigger: true});
         },

         signUpFailure: function(model, response) {
             alert("Failure: " + response);
         }
    });

    myApp.TestView = Backbone.View.extend({

         el: $('#bodyTarget'),

         modelEvents: {
             'change' : 'render'
         },

         render: function() {
             document.title = "Test Page";
             this.$el.html( "<div>this is a test view</div>");
             return this;
         }
    });

    // for now, just pull values from form back into model
    function bindFormValues(view) {
        var mod = view.model;
        var el = view.$el;
        var updates = {};
        for (var prop in mod.attributes) {
            var found = el.find('* [name="' + prop + '"]');
            if (found.length > 0) {
                updates[prop] = found.val();    
            }
        }
        mod.set(updates/*, {error: errorHandler}*/);
    }

    // routers
    myApp.Router = Backbone.Router.extend({
        routes: {
            'test': 'test',
            '': 'home',
        },

        home: function() {
            console.debug('home:enter');
            this.signUpView = new myApp.SignUpView({model: new myApp.SignUp()});
            this.showView(this.signUpView);
            console.debug('home:exit');
        },


        test: function() {
            console.debug('test:enter');
            this.testView = new myApp.TestView({model: new myApp.SignUp()});
            this.showView(this.testView);
            console.debug('test:exit');
        },

        showView: function(view) {
            if (this.currentView) {
                this.currentView.stop();
            }
            this.currentView = view.start().render();
          }
     });

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

});

我的HTML页面只是引入了相关的脚本,并且div元素bodyTarget在加载时注入了视图。

编辑:Duh,我发现了问题。事实证明,我需要通过返回false来阻止对signUp()调用的事件传播。

0 个答案:

没有答案