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

How to call a backbone view function from another view in separate files

本文关键字：视图 另一个 调用 函数 单独 文件      更新时间：2023-09-26

我在两个独立的文件中定义了两个主干视图，即：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=新建landingView（）；currentUserName=landingView.formatAccountName（）；

这也失败了。有人能在这方面帮助我吗？告诉我如何实现

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

http://jsfiddle.net/v4h11qac/

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

原始答案：

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

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提供了一个可以用来满足这一要求的请求/响应模式。

您可以使用一个全局事件调度器，您可以在类似以下的主js文件中声明它：

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

然后在您的视图中，监听事件并运行函数。

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

从另一个视图发送这样的事件。

vent.trigger('your:event',args)
相关文章：