Question

我正在使用Bootstrap手风琴面板，并希望将一个类添加到panel的父panel-collapse。

基本上，

if (child element) hasClass('panel-collapse.in') {
    this.addClass('open')
} else {
    this.removeClass('open')
}

以下是我的js片段，以及对我认为代码如何工作的视而不见：

return Marionette.ItemView.extend({
    tagName: 'li',
    className: "panel panel-default",
    template: panelTpl,
    events: {
       ...
       'click .panel-collapse': '_panelChange',
 },

 _panelChange: function() {
    if(element.has('div.in').length != 0) {
        element.addClass('open');
        console.log('panel opened fool');
    } else {
        element.removeClass('open');
        console.log('panel closed fool');
    }
 },

我按照此处提供的解决方案：Using jquery on Marionette itemView to addClass to this.$el

但无济于事。

events和modelEvents之间是否存在差异？

我不确定我应该把代码放在哪里，或者确切地说应该如何写代码，但我认为它应该在event

之内

Answer 1

是的，视图的事件和模型的事件之间存在差异。将处理程序绑定到视图的事件时如此：

events: {
  'click .panel-collapse': '_panelChange'
},

然后我们讨论DOM中发生的事件。当模型上发生更改等时，模型上的事件就会发生。但在你的情况下，没有使用模型。

这是一种解决_panelChange功能的方法。

return Marionette.ItemView.extend({
  tagName: 'li',
  className: "panel panel-default",
  template: panelTpl,
  events: {
     ...
     'click .panel-collapse': '_panelChange',
  },

  _panelChange: function(e) {
    $clickedEl = $(e.target);

    // Checks if clicked element has element with class,
    // if so, adds a class to parent element.
    // otherwise removes the class from parent element.
    if($clickedEl.has('div.in').length != 0) {
      this.$el.addClass('open');
    } else {
      this.$el.removeClass('open');
    }
  },
});

您使用的方法不是数据驱动的（您没有使用模型），因此您可能希望对此进行研究。

使用更多数据驱动的方法，您可以考虑这样的事情：

1）为手风琴中的每个项目设置模型。这需要一些不同的东西，如{label: 'My accordion item 1', open: false}。

2）当用户点击手风琴项目时，点击事件处理程序将更新模型this.model.set('open', true);。该视图还需要监听它的模型更改，因此当它被停用时，它需要自行更新（删除open类）。像这样this.listenTo(this.model, 'change:open', this.toggleMe)。

3）然后处理所有手风琴模型的集合将收到模型的open属性已更改的事件。然后，它会更新将旧open模型设置为false（关闭它）的所有其他模型。

这样，状态的所有更新都发生在集合和模型（数据驱动）中，并且视图只是监听它们并自行更新，除了项目视图的单击处理程序，它还会在单击时更新它自己的模型

木偶 - 将类添加到父ItemView标记名

1 个答案: