Backbone.js 主干视图将值传递给另一个视图

MenuView.js

events: {
    "click ul li": "MenuClick"
},
MenuClick: function (e) {
   var elm = e.currentTarget;
   return elm.firstChild.innerText;
},

define(['underscore', 'backbone', '../Collection/MenuCol'], function (_, Backbone, MenuCol) {

var MenuView = Backbone.View.extend({
    initialize: function () {
        //var vent = _.extend({}, Backbone.Events);
        var mnCol = new MenuCol();
        mnCol.fetch({
            type: 'POST',
            contentType: "application/json; charset=UTF-8",
            success: _.bind(this.AppendMenu, this),
        });
    },
    AppendMenu: function (msg) {
        var feed = JSON.parse(JSON.stringify(msg));
        //var title = _.pluck(_.flatten(feed[0]), "Title");

        _.each(_.flatten(feed[0]), function (data) {
            this.$('ul').append('<li class="inactive"><p class="none">' + data.Code + '</p><a>' + data.Title + ' </a></li>');
        });
    },
    events: {
        "click ul li": "MenuClick"
    },
    MenuClick: function (e) {
        var elm = e.currentTarget
        console.log(elm.firstChild.innerText);
        this.trigger('itemChoose', elm.firstChild.innerText);
    },
});
    return MenuView;
});

ModuleView.js

ModuleView = Backbone.View.extend({
    initialize: function () {
        var moduleDt = new ModuleCol();
        moduleDt.fetch({
            data: JSON.stringify({ Code: "Pass to here" }),
            dataType: "json",
            type: 'POST',
            contentType: "application/json; charset=UTF-8"
        });
    },

define(['underscore', 'backbone', 'datatables', '../Collection/ModuleCol', '../View/MenuView'], function (_, Backbone, dataTable, ModuleCol, MenuView) {

var ModuleView = Backbone.View.extend({
    initialize: function () {
        //MenuView.vent.on('itmChoose');
        MenuView.on('itemChoose', function (item_value) { });
        var mdCol = new ModuleCol();
        mdCol.fetch({
            data: JSON.stringify({ Code: "" }),
            type: 'POST',
            contentType: "application/json; charset=UTF-8",
            success: _.bind(this.AppendModule, this),
        });
    },
    AppendModule: function (msg) {
        var feed = JSON.parse(JSON.stringify(msg));

        $('table[id$=gvMenu]').dataTable({
            "bAutoWidth": false,
            "aoColumns": [
            { "sWidth": "10%" },
            { "sWidth": "90%" },
            ],
            "bFilter": false,
            "bInfo": false,
            "bLengthChange": false,
            "bSort": false,
            "bPaginate": false,
            "aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "All"]
            ],
            "iDisplayLength": -1,
            "aoColumns": [
            {
                "sTitle": "Code", "mDataProp": "Title",
            },
            {
                "sTitle": "Description", "mDataProp": "Description",
            }],
            sAjaxSource: "",
            sAjaxDataProp: "",
            fnServerData: function (sSource, aoData, fnCallback) {
                //console.log(feed.d);
                //fnCallback(feed.d);
            },
        });
    }
});

//MenuView.on('itmChoose', function (item_value) { });

    return ModuleView;
});

代码应该是这样的，当点击ul li时，我将从li中获取值并传递到moduleView.js以继续进行主干提取，但我不知道如何进行提取，我搜索了相当多的链接，但仍然无法找出正确的，是否正确进行提取

更新1:

View/MenuView.js

events: {
    "click ul li": "MenuClick"
},
MenuClick: function (e) {
   var elm = e.currentTarget;
   return elm.firstChild.innerText;
},

define(['underscore', 'backbone', '../Collection/MenuCol'], function (_, Backbone, MenuCol) {

var MenuView = Backbone.View.extend({
    initialize: function () {
        //var vent = _.extend({}, Backbone.Events);
        var mnCol = new MenuCol();
        mnCol.fetch({
            type: 'POST',
            contentType: "application/json; charset=UTF-8",
            success: _.bind(this.AppendMenu, this),
        });
    },
    AppendMenu: function (msg) {
        var feed = JSON.parse(JSON.stringify(msg));
        //var title = _.pluck(_.flatten(feed[0]), "Title");

        _.each(_.flatten(feed[0]), function (data) {
            this.$('ul').append('<li class="inactive"><p class="none">' + data.Code + '</p><a>' + data.Title + ' </a></li>');
        });
    },
    events: {
        "click ul li": "MenuClick"
    },
    MenuClick: function (e) {
        var elm = e.currentTarget
        console.log(elm.firstChild.innerText);
        this.trigger('itemChoose', elm.firstChild.innerText);
    },
});
    return MenuView;
});

master.js

 require(['jquery', '../JScripts/View/MenuView', '../JScripts/View/ModuleView'], function ($, menu, module) {
    $(document).ready(function () {
        new menu({ el: $('#sidebar') });
        new module({});
     });
});

这是我的代码，但这样的代码是正确的吗？我花了一个晚上的时间来解决这个问题，但它仍然说它没有定义

当li单击时，我获得li的值，并将其传递到module.js以获取ajax数据，以便创建datatable

---

我继续想办法，看看我今天是否能在等待您的指导时完成：）谢谢

如果您的ModuleView和MenuView是系统的同等组件，请在代码中选择一些中心组件（例如，后代主干网.路由器），并通过它进行通信。 如果视图不是相等的组件（例如ModuleView聚合MenuView），则可以从ModuleView中的MenuView订阅某些事件并传递值：

    //in ModuleView
    menuView.on('itemChoosen', function(item_value) { .... });

    //in MenuView
    MenuClick: function (e) {
       var elm = e.currentTarget;
       this.trigger('itemChoosen',  elm.firstChild.innerText);
    },

---

根据您的更新，您必须向ModuleView实例提供MenuView实例：

master.js：

require(['jquery', '../JScripts/View/MenuView', '../JScripts/View/ModuleView'], function ($, menu, module) {
  $(document).ready(function () {
    var menuInstance = new menu({ el: $('#sidebar') });
    new module({menu: menuInstance});
  });
 });

ModuleView.js：

var ModuleView = Backbone.View.extend({
  initialize: function (options) {
    //MenuView.vent.on('itmChoose');
    options.menu.on('itemChoose', function (item_value) { });
    var mdCol = new ModuleCol();
    mdCol.fetch({
        data: JSON.stringify({ Code: "" }),
        type: 'POST',
        contentType: "application/json; charset=UTF-8",
        success: _.bind(this.AppendModule, this),
    });
  },

---

在我的代码中，我假设

this

是MenuView的实例，所以请注意这个。如果你在更新你的帖子时遇到了一些麻烦，那么这可以帮助我了解情况，如何在moduleView.js上点击鼠标触发它？如果我在初始化时输入，它不会在单击时跳转，而只会在加载时触发它？或者我将事件li click移动到moduleView.js而不是menuView.js？在menuView中li click时触发，然后在menuView中触发事件“itemChoose”，我们在moduleView中捕获此事件，因为我们在initialize（）方法中订阅它