1

我刚刚开始了 Backbone JS SPA（单页应用程序）的基础工作。我正在使用基本的下划线模板支持，并且遇到了意外路由的问题。

基本上，注册视图最初按预期显示，当我单击按钮时成功发布，我让它导航到一个简单的测试视图。但是，测试视图很快被渲染，然后我再次被重新路由到默认注册视图。

我看到了测试页面的历史记录，如果我点击后退按钮，我会回到那个工作正常的测试视图。我看到在 Backbone 中触发了一些事件，将我路由回空白片段（注册页面），但我不知道为什么。我尝试在导航呼叫上弄乱替换和触发选项，但没有运气。

作为旁注，start() 和 stop() 视图函数改编自这篇文章： http: //lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone -应用程序/。我尝试删除它并没有效果。

$(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，它在加载时注入了视图。

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

4

0 回答 0