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)

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

2 个答案: