木偶-将类添加到父类ItemView tagname

Marionette - Add class to parent ItemView tagname

本文关键字：父类 ItemView tagname 添加 木偶      更新时间：2023-09-26

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

, 

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

我遵循了这里提供的解决方案:使用jquery在木偶itemView上添加class。

但无济于事。

events与modelEvents是否有差异?

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

是的，视图的事件和模型的事件是有区别的。当像这样将处理程序绑定到视图的事件时:

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(关闭它)。

这样，所有对状态的更新都发生在集合和模型中(数据驱动)，视图只听取它们并更新自己，除了项目视图的点击处理程序，它也会在点击时更新自己的模型。

相关文章：