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

ConfuXigrator 发表于 Dev

ConfuXigrator

我在两个单独的文件中定义了两个主干视图，分别是：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（）;

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

卡尔·普克

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

http://jsfiddle.net/v4h11qac/

出现此问题的原因可能是另一个未正确处理的错误，导致代码无法运行。您应该修复现有的错误，并且方法调用应按预期工作。

原始答案：

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

LandingView.prototype.formatAccountName();

如果您需要通过新的上下文，可以使用如下的callorapply方法：

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);
        // ...
    }
};