Use of data attribute on mixItUp.js

Question

I have been testing MixItUp.js for filtering my category page, but i can't see how to avoid putting the options i wan't to filter, into the css class.

For other codeing reasons i would like to use the data-attribute instead. But i simply can't figure out how to do it.

in their example they use it like this:

<div id="Container">
    <div class="mix category-1" data-myorder="2"></div>
    <div class="mix category-2" data-myorder="4"></div>
    <div class="mix category-1" data-myorder="1"></div>
    ...
    <div class="mix category-2" data-myorder="8"></div>
</div>

But i would like to use this approach instead.

<div id="Container">
    <div class="mix" data-filter1="category-1" data-myFilter2="brand-1"></div>
    <div class="mix" data-filter1="category-2" data-myFilter2="brand-2"></div>
    <div class="mix" data-filter1="category-1" data-myFilter2="brand-3"></div>
    ...
    <div class="mix" data-filter1="category-2" data-myFilter2="brand-4"></div>
</div>

Answer 1

This might work:

<div class="filter" data-filter="[data-filter1=catagory-1] ">Filter this</div>