show/hide list item if-statement div

Question

I am new to javascript and especially dojo and I got stuck to, I assume quite simple task, but I just cannot solve it.

Basically what I'm trying to do is the following:

When I click on a listitem I should be sent to another view. I am doing this with:

<li data-dojo-type="dojox.mobile.ListItem"
            data-dojo-props="moveTo:'#'" onClick="transitionTo('#recommend',1);">Recommend App</li>

Now the div with id=recommend` has got 2 listitems.

<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
        <div class="belowTab" style="width: 100%;">&nbsp;</div>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li data-dojo-type="dojox.mobile.ListItem">via Email</li>
                <li data-dojo-type="dojox.mobile.ListItem"
                    data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</div>
            </ul>

I want to make both listitems visible if some particular function returns true otherwise hide 2nd listitem and show just 1st. I want to know the logic and how to approach this idea of integrating an if-statement together with the div

Answer 1

There is a rather unpoorly documented method of creating event hooks as markup which i will demonstrate here. However it would be better to create a function in your codebase and then set it as a dojoProps attribute, eg function myonclick() { ... } and <div data-dojo-type="dijit._Widget" data-dojo-props="onClick: myonclick"></div> .

To achieve this, you need to figure out which events the View widget offers. Easist way to do this is to simply open the dojotoolkit-src/dojox/mobile/View.js file - the ones youre looking for are probably onStartView || onBeforeTransitionIn onStartView || onBeforeTransitionIn ?

Via markup, we now create dojo/method to onBefore.. so that you may manipulate children in your list. You have a stray closing </div> tag by the way.

<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
    <div class="belowTab" style="width: 100%;">&nbsp;</div>
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li data-dojo-type="dojox.mobile.ListItem">via Email</li>
        <li data-dojo-type="dojox.mobile.ListItem"
              data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
    </ul>

    <script type="dojo/method" event="onBeforeTransitionIn" args="moveTo, dir, transition, context, method">
          // onBeforeTransitionIn(moveTo, dir, transition, context, method):
          var listWidget = dijit.byNode(dojo.query("#recommended ul")[0]);
          // say you have a function with true/false return, if item should show
          dojo.forEach(listWidget.getChildren(), function(Item, idx) {
              dojo.style(Item.domNode, {
                   display: showItem(Item) ? '' : 'none'
              });
          });
    </script>
</div>