如何從單獨文件中的另一個視圖調用骨干視圖功能

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提供了一個請求/響應模式，可用於滿足此要求。

Answer 2

您可以使用在某種main-js文件中聲明的全局事件調度程序，如下所示：

var vent = _.extend({}, Backbone.Events);

然后在您的視圖中，監聽事件並運行函數。

vent.on('your:event',this.function_to_run_from_other_view,this);

從其他視圖發送這樣的事件。

vent.trigger('your:event',args)