CSS durch Daten-Attribut wird nicht aktualisiert/neu streichen

Question

In einer HTML5/JS-Anwendung haben wir eine Ansicht mit einigen Arten auf der data-attribute von Elementen abhängig:

wie

<li data-level="0"></li> 

oder

<li data-level="1"></li> 

CSS

li[data-level^="1"] { 
    /* some styles */ 
} 

Das scheint bei page reload überall gut zu funktionieren.

Wenn das Datenattribut jedoch programmgesteuert über JS gesetzt wird, werden die CSS-Eigenschaften in allen relevanten Desktop-Browsern gerendert, nicht jedoch in mobilen Safari.

JS Teil sieht wie folgt aus:

this.$el.attr('data-level', this.model.getLevel()) 

Irgendwelche Ideen auf, wie man diese Eigenschaften (Refresh/repaint etwas) zu zwingen, bewerben?

Ich mag mit dem Klassen-Attribute und verschiedene Klassen vermeiden, wie die Dinge sind komplexer als hier gezeigt ...

Answer 1

ok, das Ändern von Daten-Attributen einfach scheint nicht ein erneutes Zeichnen des Elements in allen auslösen Browser!

Das Attribut class wird jedoch geändert. Eine Art Workaround, aber es funktioniert.

this.$el 
     .attr('data-level', this.model.getLevel()) 
     .addClass('force-repaint') 
     .removeClass('force-repaint'); 

Wie hier zu sehen: Changing a data attribute in Safari, but the screen does not redraw to new CSS style