Estoy trabajando en mi primer Ember.js aplicación y estoy teniendo algunos problemas para conectar todos los puntos. Sería realmente útil si tan sólo pudiera ver todas las variables disponibles dentro de un manillar de la plantilla.

Hay una pregunta relacionada, pero usted tiene que saber la variable que está en el ámbito de empleo:
¿Cómo puedo agregar la consola.log() de JavaScript lógica dentro de un Manillar de la plantilla?

¿Cómo puedo salida todos las variables?

  • el uso de una expresión regular para que coincida con la plantilla de secciones y tira de las definiciones.
  • puede dar un ejemplo? Estoy trabajando con una demo de github.com/eviltrout/emberreddit.
InformationsquelleAutor doub1ejack | 2013-11-05

6 Comentarios

  1. 10

    una buena opción es para depurar el valor de ‘esta’ en una plantilla utilizando el Manillar ayudantes:
    1.

    {{#each}}
        {{log this}}    
    {{/each}}

    o,
    2. similares a @watson propuso

    {{#each}}
        {{debugger}}
    {{/each}}

    y, a continuación, perfore en el Ámbito Local de las Variables para ‘esto’ en el Dev Tools

    Cómo ver todas las variables disponibles en el manillar de la plantilla

    o, alternativamente, 3. puede acceder directamente desde el interior de su Controlador método init, tales como:

    App.UsersController = Ember.ArrayController.extend({
        init: function() {
            console.log(this);
            console.log(this.getProperties('.'));
        }
    });
    • Must pass iterator to each
    • opción 1 dentro de esta respuesta fue muy útil para mí, aunque no tan completa como su opción 2 o la opción 3. 🙂
  2. 7

    Asegúrese de probar Firebug – vas a tener una perspectiva diferente de las cosas, que he encontrado muy útil. Pero no abandone chrome completamente; usted necesitará la Ember Inspector en algún momento.

    Estoy usando el mismo depuración de ayudante de todo el mundo recomienda, y esta es la forma en Chrome muestra:

    Cómo ver todas las variables disponibles en el manillar de la plantilla

    Al ampliar el mismo objeto en firebug, me sale la siguiente información, incluyendo las variables que estaba buscando (fuentes[]) y algunas otras propiedades útiles que yo no había visto en Chrome.

    Cómo ver todas las variables disponibles en el manillar de la plantilla

    • Hmm, pero no parece ser un ember.js el plugin Firebug sin embargo..
    • Firebug / Chrome Inspector de mostrar los mismos datos, en un formato diferente. Y, como @doub1ejack mencionado, hay una gran (gran) extensión para Chrome Inspector. No creo que los comentarios acerca de Firebug son relevantes para el puesto. Gracias por la ayuda en la depuración de ayudante.
    • Un formato diferente puede hacer una gran diferencia, especialmente cuando estás en un ambiente desconocido. Me encontré con firebug para ser más informativo (inicialmente) por las razones ilustrado por estas capturas de pantalla. Estoy totalmente de acuerdo sin embargo, que las Brasas extensión de Chrome es fantástico, no me ayuda en la situación de la OP.
    • Buena edición. El post es mucho menos sesgada ahora 🙂 me has convencido para tratar de Firebug de nuevo, gracias.
    • Ember Inspector está ahora disponible como un Complemento de Firefox: Ember Inspector Firefox
  3. 1

    Si usted realmente necesita para volcar el variables en su plantilla, usted puede explorar la plantilla de la AST y la salida el contenido de los correspondientes nodos (véase el compilador fuentes). Esto no es una tarea fácil porque usted tiene que encontrar su camino a través de ensayos y errores, y el código es bastante bajo nivel y no hay tantos comentarios.

    Parece Handlerbars no tiene un acceso directo para lo que estamos pidiendo, así que los pasos serían:

    1. precompilar una plantilla (ver el línea de comandos de origen, creo que se llama a la función handlebars.precompile())
    2. explorar el AST
  4. 1

    La muestra Ascua de la aplicación de mencionar que define su EmberObjects derecho en su app.js. Así que, básicamente, lo que está disponible en los objetos son las propiedades que se definen en ellos hay. (por ejemplo, subreddit tiene un title, etc).

    Si quieres un mundo de manera disponible para el volcado de un objeto del esquema de propiedad a la consola, un enfoque podría ser la creación de una «depuración» ayudante que camina por los miembros de la pasado-en contextos y escribe con ellos. Algo así como:

    Handlebars.registerHelper('debug', function (emberObject) {
        if (emberObject && emberObject.contexts) {
            var out = '';
    
            for (var context in emberObject.contexts) {
                for (var prop in context) {
                    out += prop + ": " + context[prop] + "\n"
                }
            }
    
            if (console && console.log) {
                console.log("Debug\n----------------\n" + out);
            }
        }
    });

    A continuación, llamar en cualquier cosa que usted desea inspeccionar:

    <div>Some markup</div>{{debug}}<div>Blah</div>

    Este se adaptará a lo que EmberObject en el ámbito, por lo que el pop dentro de un {{#each}} si usted desea inspeccionar los elementos de la lista, como opuesto al objeto con la lista.

    • Me gusta este enfoque. ¿Cuál es el periodo en el {{debug .}}? He intentado esto y hasta ahora no he visto ningún útil variables de la muestra. Me parece ver el mismo 5 cadenas de imprimir cada vez: view, buffer, isRenderData, keywords y insideGroup. He añadido una propiedad a mi modelo y estoy esperando a ver por lo menos que..
    • . representa el contexto actual de objeto – es análoga a la this de su contexto. Usted puede utilizar .. para ir un nivel de «fuera» (no!), y el contexto de la envoltura.
    • Esto se parece a pesar de que usted está recibiendo la options.data, en lugar de la context, en su plantilla – esas son todas Ember propiedades. Se que posiblemente la invocación de su plantilla, sin pasar a su objeto?
    • Echa un vistazo a view.js, línea 1183 de Ember: github.com/emberjs/ember.js/blob/… El render función se va a tomar su plantilla y pasar la context, y que los datos objeto como el options.data.
    • Bueno.. no sé. Yo no soy explícitamente pasar los objetos de plantillas (no creo) – supuse Brasa estaba haciendo por mí. Con este ejemplo (github.com/eviltrout/emberreddit/blob/master/js/app.js), ¿qué cambios sugeriría usted?
    • He modificado el código para que funcione con su aplicación de muestra. Tenga en cuenta que ahora solo tiene que llamar {{debug}} sin la . param, puesto que se pasa el EmberObject automáticamente.

  5. 0

    Las variables disponibles dentro de una plantilla sólo están limitadas por el modelo que usted está utilizando para procesar la plantilla.

    Debe establecer un punto de interrupción en su aplicación, donde se procesa la plantilla y ver qué hay en su modelo en ese momento, la que deberá usted lo que usted tiene disponibles para poner en su plantilla.

    • Esto suena bien (que preferiría ser capaz de utilizar un inspector). No sé donde poner un punto de interrupción, aunque. Estoy explorando un proyecto de ejemplo de github.com/eviltrout/emberreddit. No explícitos, vistas (supongo que es donde la plantilla se representa) y yo no puedo poner un punto de interrupción en las plantillas de los mismos. Donde debo buscar?
    • Utilizar el Manillar depurador de ayuda para establecer un punto de interrupción dentro de la plantilla como {{debugger}} y, a continuación, compruebe el Ámbito Local de las Variables de la Ficha Fuentes de Chrome Dev Tools.
    • Wow, no sabía que se podía hacer {{depurador}}, que bueno saber.
  6. 0

    He creado Barhandles hace un par de años. Se va a utilizar el Manillar analizador para producir la AST y, a continuación, extraer las referencias a variables de él. El extractSchema método — bien — extracto de un esquema. El esquema no está basada en JSON Esquema o Joi o nada. Es un formato de cosecha propia que capta la mayoría de las cosas que usted podría posiblemente extracto del Manillar de la plantilla.

    Así, este barhandlers.extractSchema('{{foo.bar}}') produce:

    {
      "foo": {
        "_type": "object",
        "_optional": false,
        "bar": {
          "_type": "any",
          "_optional": false
        }
      }
    }  

    Se tendrá en cuenta que un {{#if expr}} hará automáticamente referencias anidadas opcional. Se maneja correctamente los cambios de alcance basado en {{#with expr}} construcciones, y permite añadir soporte para su propio directivas personalizadas así.

    Hemos utilizado para hacer la validación de las estructuras de datos que hemos pasado en la plantilla, y estaba funcionando bastante bien para ese propósito.

Dejar respuesta

Please enter your comment!
Please enter your name here