0

菜单视图.js

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

模块视图.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 以继续进行主干提取，但我不知道如何实际制作它，我已经搜索过了相当多的链接，但仍然无法弄清楚正确的，它是正确的吗？

更新1：

视图/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;
});

大师.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 数据，以便我可以创建数据表。

我继续想办法，看看我今天能不能在等待你的指导的时候成功：）谢谢

4

2 回答 2

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);
    },
于 2013-06-11T08:45:21.627 回答
1

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

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

模块视图.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),
    });
  },
于 2013-06-12T04:25:51.653 回答