DMX Binding - How to get the current URL

Front End Components General
1

I am dynamically generating a menu from a database table. I’m trying to set an ‘active’ class based on if the route is found in the current location.href but the dmx data binding doesn’t appear to have a handle to the window.

Any ideas?
Here’s my client-side code:

<ul class="list-unstyled components">
    <div dmx-repeat:repeat1="sc_menu_list.data.menu">
        <li dmx-class:active="window.location.href.indexOf(route)>0">
            <a dmx-bind:href="route.length>0 ? route : '#' + name + '_submenu'" dmx-class:dropdown-toggle="(sc_menu_list.data.repeat_submenu[$index].submenu.count() > 0)"
                dmx-bind:data-toggle="(sc_menu_list.data.repeat_submenu[$index].submenu.count() > 0)?'collapse':null" aria-expanded="false">
                <i dmx-bind:class="icon"></i>&nbsp;<span dmx-text="name"></span>
            </a>
        </li>
        <ul class="collapse list-unstyled" dmx-bind:id="name + '_submenu'" dmx-bind:repeat="sc_menu_list.data.repeat_submenu[$index].submenu" is="dmx-repeat">
            <li>
                <a dmx-bind:href="route">
                    <i dmx-bind:class="icon"></i>&nbsp;<span dmx-text="name"></span>
                </a>
            </li>
        </ul>

    </div>
</ul>
2

Have you tried the Browser component? I think it returns the current URL.

3

Like Otavio suggests, you need to use the browser component here.
That has a location object, which has a pathparts array, which can help you acheive what you are trying to do here.

Also, in all DMX dynamic stuff, you cannot use JS.
You need to either use STATIC events to run JS. Or use a flow to call JS function. Or setup a client side formatter to use on dynamic elements.

4

Thanks to both of you for replying! I ended up using a custom formatter. I didn’t even know that existed.

Will post a sample later so other people who run across this have an example.

3 Likes
5

Here’s the code sample I promised:

        <script>
        dmx.Formatter('string','isActive', function(val) {
            return window.location.href.indexOf(val)>0;
          }
        );
        </script>
    <nav id="sidebar">
    <div class="sidebar-header">
        <h3>Bootstrap Sidebar</h3>
        <strong>BS</strong>
    </div>
    <ul class="list-unstyled components">
        <div dmx-repeat:repeat1="sc_menu_list.data.menu">
            <li dmx-class:active="route.isActive()">
                <a dmx-bind:href="route.length>0 ? route : '#' + name + '_submenu'" dmx-class:dropdown-toggle="(sc_menu_list.data.repeat_submenu[$index].submenu.count() > 0)"
                    dmx-bind:data-toggle="(sc_menu_list.data.repeat_submenu[$index].submenu.count() > 0)?'collapse':null" aria-expanded="false">
                    <i dmx-bind:class="icon"></i>&nbsp;<span dmx-text="name"></span>
                </a>
            </li>
            <ul class="collapse list-unstyled" dmx-bind:id="name + '_submenu'" dmx-bind:repeat="sc_menu_list.data.repeat_submenu[$index].submenu" is="dmx-repeat">
                <li>
                    <a dmx-bind:href="route">
                        <i dmx-bind:class="icon"></i>&nbsp;<span dmx-text="name"></span>
                    </a>
                </li>
            </ul>

        </div>
    </ul>
    </nav>
2 Likes