Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Cannot use `$if` together with setting `$state` from within `$lifecycle`

Abierto
  • ¿Algo no está bien?
#44 9 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
frontend

Línea de trabajo

Reproduce las tres configuraciones de escena del issue, comparando $if, $lifecycle post-load y $state.set. Empieza siguiendo el manejo del ciclo de vida, el estado y los comportamientos del framework, y revisa el issue relacionado #41; el trabajo estará terminado cuando establecer path durante post-load actualice correctamente los nodos controlados por $if.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug

In short, I can't use $if together with setting $state from within post-load.

This works:

FamousFramework.scene('ildar:page-controller', {
    behaviors: {
        // '#home': {
        //     '$if': function(path) { return path === '/'  }
        // },
        // '#blog': {
        //     '$if': function(path) { return path === '/blog'  }
        // },
        // '#about': {
        //     '$if': function(path) { return path === '/about' }
        // },
        '.page': {
            'size': [200, 200],
            'align': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'style': {
                'background': 'whitesmoke'
            }
        }
    },
    events: {
        '$lifecycle': {
            'post-load': function($state) {
                console.log('post-load');
                $state.set('path', '/');
            }
        },
        '.page': {
            'click': function($state) {
                console.log('WORKS');
                $state.set('path', '/blog');
            }
        }
    },
    states: {
        path: null,
    },
    tree: `
        <node id="home"  class="page">  <div> HOME  </div>  </node>
        <node id="blog"  class="page">  <div> BLOG  </div>  </node>
        <node id="about" class="page">  <div> ABOUT </div>  </node>
    `
});

This also works:

FamousFramework.scene('ildar:page-controller', {
    behaviors: {
        '#home': {
            '$if': function(path) { return path === '/'  }
        },
        '#blog': {
            '$if': function(path) { return path === '/blog'  }
        },
        '#about': {
            '$if': function(path) { return path === '/about' }
        },
        '.page': {
            'size': [200, 200],
            'align': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'style': {
                'background': 'whitesmoke'
            }
        }
    },
    events: {
        '$lifecycle': {
            'post-load': function($state) {
                console.log('post-load');
                // 
                // If $state isn't set from here, the code works.
                // 
                // $state.set('path', '/');
            }
        },
        '.page': {
            'click': function($state) {
                console.log('WORKS');
                $state.set('path', '/blog');
            }
        }
    },
    states: {
        path: '/',
    },
    tree: `
        <node id="home"  class="page">  <div> HOME  </div>  </node>
        <node id="blog"  class="page">  <div> BLOG  </div>  </node>
        <node id="about" class="page">  <div> ABOUT </div>  </node>
    `
});

But this doesn't work:

FamousFramework.scene('ildar:page-controller', {
    behaviors: {
        '#home': {
            '$if': function(path) { return path === '/'  }
        },
        '#blog': {
            '$if': function(path) { return path === '/blog'  }
        },
        '#about': {
            '$if': function(path) { return path === '/about' }
        },
        '.page': {
            'size': [200, 200],
            'align': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'style': {
                'background': 'whitesmoke'
            }
        }
    },
    events: {
        '$lifecycle': {
            'post-load': function($state) {
                console.log('post-load');
                $state.set('path', '/');
            }
        },
        '.page': {
            'click': function($state) {
                console.log('WORKS');
                $state.set('path', '/blog');
            }
        }
    },
    states: {
        path: null,
    },
    tree: `
        <node id="home"  class="page">  <div> HOME  </div>  </node>
        <node id="blog"  class="page">  <div> BLOG  </div>  </node>
        <node id="about" class="page">  <div> ABOUT </div>  </node>
    `
});

Could be related to #41

Lenguaje dominante
JavaScript
Estrellas
394
Forks
62
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Famous/framework

Todos los issues de Famous/framework

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.