Famous / famous-angular

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.
https://famo.us/angular
Mozilla Public License 2.0
1.92k stars 275 forks source link

feat: support removing children from header-footer-layout #182

Closed rajatkhanna82 closed 10 years ago

bguiz commented 10 years ago

This breaks my app, where I have many renderables inside of my main fa-header-footer-layout, including other, nested, fa-header-footer-layouts.

Inside of the $famouseDecorator.sequenceWith function, this code is to blame:

            if(data.index) {
              if(data.index === 0) {
                isolate.renderNode.header.add(data.renderGate);
              } else if (data.index === 1) {
                isolate.renderNode.content.add(data.renderGate);
              } else if (data.index === 2) {
                isolate.renderNode.footer.add(data.renderGate);
              } else if(data.index >= 3){
                throw new Error('fa-header-footer-layout can accept no more than 3 children');
              }
            } else
            {
              if (_numberOfChildren === 1 ) {
                isolate.renderNode.header.add(data.renderGate);
                console.log(isolate.renderNode.header);
              } else if (_numberOfChildren === 2){
                isolate.renderNode.content.add(data.renderGate);
              } else if (_numberOfChildren === 3){
                isolate.renderNode.footer.add(data.renderGate);
              } else {
                throw new Error('fa-header-footer-layout can accept no more than 3 children');
              }
            }

Now, just experimenting, I get rid of the if/else clause, and do just the latter part, (what's inside the else clause in this PR), like this:

              if (_numberOfChildren === 1 ) {
                isolate.renderNode.header.add(data.renderGate);
                console.log(isolate.renderNode.header);
              } else if (_numberOfChildren === 2){
                isolate.renderNode.content.add(data.renderGate);
              } else if (_numberOfChildren === 3){
                isolate.renderNode.footer.add(data.renderGate);
              } else {
                throw new Error('fa-header-footer-layout can accept no more than 3 children');
              }

... then everything works just fine.

With some further investigation, I find that the value of data.index can go way more than 3, and goes as high as the number of total fa-surfaces that I have within the fa-header-footer-layout, not just its immediate children, as is the case with the code in the else clause.

... I am now not sure of the purpose of the code in the if clause, could you please explain?

zackbrown commented 10 years ago

merged #203, which covers this same feature