Backbone view pass value to another view

Question

MenuView.js

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

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"
        });
    },

The code should work like, when clicking the ul li, I will get the value from the li and pass to the moduleView.js to proceed with backbone fetch, but I dont have any idea on how actually to make it, I had search through quite some link, but still can't figure out the correct, are it is correct to make it?

Update1:

View/MenuView.js

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

View/ModuleView.js

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

master.js

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

This is my code, but still, it is correct to code like this? I had spent a night to work it out, but it still say is undefined.

When li click, I get the value of the li, and pass to module.js to ajax data so that I can create datatable.

I continue to puzzle it out and see if I can make it today while waiting for your guide :) thanks

Answer 1

According your updates, you must supply instance of MenuView to ModuleView instance:

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),
    });
  },

Answer 2

If your ModuleView and MenuView are equal components of system - pick out in your code some central component (e.g. descendant Backbone.Router) and make communication through it. If your views aren`t equal components (e.g. ModuleView aggregates MenuView), you can subscribe on some event from MenuView in ModuleView and pass value:

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

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