如何从单独文件中的另一个视图调用骨干视图功能

Question

我在两个单独的文件中定义了两个主干视图,即:LandingView.js

define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'text!templates/landing/landingTemplate.html',
    'text!templates/invitations/invitationsTemplate.html',
    'views/invitations/InvitationsView',
], function ($, _, Backbone, Marionette, landingTemplate, invitationsTemplate, InvitationsView) {
var LandingView = Backbone.View.extend({
        el : $("#landing"),
        id : 'landing',
        transition : 'slide',

        initialize : function () {              
            this.GetNotificationsCounts();
        },
        events : {
            'click #invitations' : 'onInvitations',

        },
        render : function () { 
            var that = this;
            $('.menu li').removeClass('active');
            $('.menu li a[href="#"]').parent().addClass('active');

            this.$el.html(landingTemplate);

        },
        cleanup: function() { 
            this.undelegateEvents();
            $(this.el).empty();
        },
        onInvitations : function () { 

            //do something
        },

        GetProfile: function (userLogin) {
               // do something
        },


        GetNotificationsCounts: function () {
               // do something

        },

        formatAccountName: function () {
             //do something
        }


    });

return LandingView; });

然后还有另一个文件InvitationsView.js

define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'views/landing/LandingView',
    'text!templates/invitations/invitationsTemplate.html',
], function ($, _, Backbone, Marionette, LandingView, invitationsTemplate ) {


var InvitationsView = Backbone.View.extend({
        el : $("#invitations"),
        id : 'invitations',
        transition : 'slide',

        initialize : function () { debugger;

            this.$el.attr('data-transition', this.transition);
            this.currentUserLogin = currentUserLogin;
            var that = this;

        },
        events : {

        },
        render : function () { debugger;
            $('.menu li').removeClass('active');
            $('.menu li a[href="#"]').parent().addClass('active');

            this.GetUserInvitationDetails();

             this.$el.html(invitationsTemplate);

        },
        cleanup: function() { 
            this.undelegateEvents();
            $(this.el).empty();
        },

        GetUserInvitationDetails: function () {

            var landingView =  new LandingView();
            currentUserName= landingView.formatAccountName();
            curUser = currentUserName.replace("\\", "^").replace("^", "%5E");

            var profilemsg = landingView.GetProfile(currentUserName);

        },

    });

return InvitationsView;});

现在我需要将第一个JS中定义的formatAccountName和GetProfile函数调用到第二个JS.我无法做到这一点.我收到错误.当我尝试

var landingView = new LandingView(); currentUserName = landingView.formatAccountName();

这也失败了.有人可以在这方面帮助我,并告诉我如何实现这一目标

Answer 1

您当前调用该formatAccountName方法的方法有效.以下jsfiddle显示了这一点:

http://jsfiddle.net/v4h11qac/

问题可能是由于另一个未正确处理的错误导致代码无法运行.您应该修复现有错误,方法调用应该按预期工作.

Orignal答案:

您可以直接在原型对象上调用该方法:

LandingView.prototype.formatAccountName();

如果你需要通过一个新的环境,你可以使用call或apply方法如下:

LandingView.prototype.formatAccountName.call(context);

更好的方法可能涉及创建可由两个视图共享的辅助模块.

var viewHelpers = {
    formatAccountName: function(account) {
        // ...
    }
};

var ViewOne = Backbone.View.extend({
    render: function() {
        var formattedName = viewHelpers.formatAccountName(this.model);
        // ...
    }
};


var ViewTwo = Backbone.View.extend({
    render: function() {
        var formattedName = viewHelpers.formatAccountName(this.model);
        // ...
    }
};

您也可以使用系统总线,但对于这样的用例来说可能有点太重.如果您想查看该路径,那么Backbone.Radio提供了一个请求/响应模式,可用于满足此要求.