Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nested rv-if binders mess #512

Closed
n00dl3 opened this issue Aug 4, 2015 · 2 comments
Closed

nested rv-if binders mess #512

n00dl3 opened this issue Aug 4, 2015 · 2 comments

Comments

@n00dl3
Copy link

n00dl3 commented Aug 4, 2015

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);
@Duder-onomy
Copy link
Collaborator

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.

@n00dl3
Copy link
Author

n00dl3 commented Aug 5, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants