Question

问题是否必须面向另一个视图的调用视图？...当我将菜单视图调用到主视图时。菜单视图无法正确呈现。这里的大问题是事件不起作用!!但如果单独调用菜单视图然后工作正常。我有问题，事件和渲染模板中的问题是什么？

define([
  "jquery",
  "underscore",
  "backbone",
  "models/menu/MenuModel",
  "collections/menu/MenuCollections",
  "text!templates/menu/menuTemplate.html",
], function ($, _, Backbone, MenuModel, MenuCollections, menuTemplate) {

    var MenuView = Backbone.View.extend({       
        model: new MenuModel,  
        el:".sidebar_menu",    
        template: _.template(menuTemplate),
        events:{
            "click #sidebar .has-sub > a":"main_menu"
            },
        initialize:function(){         
             this.render();       
        },
        render: function () {                     
             this.$el.html(this.template());                            
          },
        main_menu:function(e){
            alert("rakib");
             var last = $('.has-sub.open', $('#sidebar'));
                last.removeClass("open");
                $('.arrow', last).removeClass("open");
                $('.sub', last).slideUp(200);
                var sub = $(e.target).next();
                if (sub.is(":visible")) {
                    $('.arrow', $(e.target)).removeClass("open");
                    $(e.target).parent().removeClass("open");
                    sub.slideUp(200);
                } else {
                    $('.arrow', jQuery(e.target)).addClass("open");
                    $(e.target).parent().addClass("open");
                    sub.slideDown(200);
                }

            }


    });

    return MenuView;

});

当我将菜单视图调用到主视图时..事件无法正常工作。究竟是什么问题??

define([
  "jquery",
  "underscore",
  "backbone",
  "views/menu/MenuView",
  "models/home/HomeModel",
  "text!templates/home/homeTemplate.html",
], function ($, _, Backbone, MenuView, HomeModel, homeTemplate) {

    var HomeView = Backbone.View.extend({       
        model: new HomeModel,
        el: $("#container"),
        template: _.template(homeTemplate),

        initialize:function(){
          this.render();  
          this.menu_render();

        },
        render: function () {
            this.$el.html(this.template());
          },
        menu_render:function()
        {
          (new MenuView).render();  


        }



    });

    return HomeView;

});

Answer 1

嗯，您需要在当前视图的html元素中添加新视图才能显示它。我建议使用追加功能将您的MenuView添加到HomeView模板文件中定义的html元素。

像这样：

$('#yourHomeViewHTMLElementDefinedInTemplate').append((new MenuView).render().el);

你的代码中的

试试这个：

    menu_render:function()
    {
      $("#container").append((new MenuView).render().el);
    }

我希望它有所帮助。

当调用View到另一个视图骨干js事件不起作用时

1 个答案: