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

代码应该像点击ul li一样，我将从li获取值并传递给moduleView.js以继续使用骨干提取，但我对如何实现它没有任何想法，我通过相当多的链接搜索，但仍然无法弄清楚是否正确，是否正确？

UPDATE1：

查看/ 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;
});

查看/ 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({});
     });
});

这是我的代码，但是，这样的代码是正确的吗？我花了一个晚上来解决它，但它仍然说未定义。

当我点击时，我得到li的值，并将module.js传递给ajax数据，以便我可以创建数据表。

我继续困惑，看看我今天是否可以在等待导游的同时做到这一点:)谢谢

Answer 1

如果你的ModuleView和MenuView是系统的相同组件 - 在你的代码中选择一些中心组件（例如后代Backbone.Router）并通过它进行通信。如果您的视图不是相同的组件（例如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);
    },

Answer 2

根据您的更新，您必须向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),
    });
  },

骨干视图将值传递给另一个视图

2 个答案: