mikeric/rivets

nested rv-if binders mess

n00dl3 opened this issue · 2 comments

I have a problem with nested rv-if binders, it works only if you set the nested value to true first and then update the main one, see the code (Fiddle here):

HTML

<div id="container">
    <!-- main is always shown, no matter the order -->
    <div rv-if="main">
        main
        <!--nested will be displayed only if nested is true before main-->
        <div rv-if="nested" >
           nested
        </div>
    </div>
</div>

JS

var scope={
    main:false,
    nested:false
};
var element=document.getElementById('container');
rivets.bind(element, scope);

function wontWork(){
    scope.main=true;
    scope.nested=true;
}
function work(){
    scope.nested=true; //it works only when you update the nested one first
    scope.main=true;
}
function reset(){
    scope.main=false;
    scope.nested=false;
}

/// in this order it works
//work();
//reset();
//window.setTimeout(wontWork,1000);

///in this order, it won't
wontWork();
reset();
window.setTimeout(work,1000);

Hi,

Here is a fiddle representing the minimal number of changes necessary to get this working for you.
http://jsfiddle.net/pnak6mj7/

The important point is that I am passing an object to the rivets bind, that properties are access from.

instead of

rivets.bind(element, scope);

It became

rivets.bind(element, { scope : scope });

This ensures that when in the html, you can do:

<div rv-if='scope.main'>
    <div rv-id='scope.nested'>
    </div>
</div>

This issue is related to : #486

I do not fully understand why this is an issue yet. But I have seen a few people run into it so I will put some effort into it soon. But basically, you should access properties on your scope, THROUGH, your scope. This way everything can stay in sync.

Please let me know if this helps you.

If it does, please close the issue. I do not believe it is a bug in rivets, but a misunderstanding on how it observes properties. We have seen a few people bring this up, so I will put it in my list of things to include in the documentation.

Yes, including this in the docs would be great, because the observing mechanics is quite unclear and I don't have time to dive deeper in rivets's code. However, if the issue is already openned elsewhere, I'll close this one.

Thanks for the help.