Handlebars.js: ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΊΠ°Ρ€Ρ‚, Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π²ΠΎ встроСнном ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊΠ΅ Β«ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎΒ»?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 10 янв. 2018  Β·  6ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: handlebars-lang/handlebars.js

ΠŸΡ€ΠΈ использовании Handlebars Π² срСдС ES6 ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ встроСнного ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊΠ° each Π½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ массивов ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² становится Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ это, я Π½Π°Ρ‡Π°Π» Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊΠ° each , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ массивы, ΠΊΠ°Ρ€Ρ‚Ρ‹, Π½Π°Π±ΠΎΡ€Ρ‹, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹. Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊ Π½ΠΈΠΆΠ΅.

Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΏΠ»Π°Π½ ΠΈΠ»ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ этих Ρ‚ΠΈΠΏΠΎΠ² списков Π²ΠΎ встроСнный ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊ each ? Π― ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ понимаю, Ρ‡Ρ‚ΠΎ Handlebars стрСмится ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»ΠΎΠ², ΠΈ я полагаю, Ρ‡Ρ‚ΠΎ СдинствСнный способ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π· ΡƒΡ‰Π΅Ρ€Π±Π° для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° β€” постСпСнно Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² списков Π² зависимости ΠΎΡ‚ Ρ€ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ срСды. для Set , Map ΠΈ Symbol .

Handlebars.registerHelper("each", function (contexts, options) {

    // Throw a runtime exception if options were not supplied.
    if (!options) {
        throw new Handlebars.Exception("Must pass iterator to #each");
    }

    // If the "list of contexts" is a function, execute it to get the actual list of contexts.
    if (typeof contexts === "function") {
        contexts = contexts.call(this);
    }

    // If data was supplied, frame it.
    const data = options.data ? Object.assign({}, options.data, { _parent: options.data }) : undefined;

    // Create the string into which the contexts will be handled and returned.
    let string = "";

    // Create a flag indicating whether or not string building has begun.
    let stringExtensionStarted = false;

    // Create a variable to hold the context to use during the next string extension. This is done to
    // allow iteration through the supplied list of contexts one step out of sync as they are looped
    // through later in this helper, ensuring a predictable sequence of value retrieval, string
    // extension, value retrieval, string extension...
    let nextContext;

    // Create a function responsible for expanding the string.
    const extendString = (final = false) => {

        // If other contexts have been encountered...
        if (nextContext) {

            // Expand the string using the block function.
            string += options.fn(nextContext.value, {
                data: data ? Object.assign(data, {
                    index: nextContext.index,
                    key: nextContext.key,
                    first: !stringExtensionStarted,
                    last: final
                }) : undefined,
                blockParams: [nextContext.key, nextContext.value]
            });

            // Note that string extension has begun.
            stringExtensionStarted = true;

        // If no contexts have been encountered and this is the final extension...
        } else if (final) {

            // Expand the string using the "else" block function.
            string += options.inverse(this);

        }

    };

    // If a list of contexts was supplied...
    if (contexts !== null && typeof contexts !== "undefined") {

        // Start a counter.
        let index = 0;

        // If an array list was supplied...
        if (Array.isArray(contexts)) {

            // For each of the possible indexes in the supplied array...
            for (const len = contexts.length; index < len; index++) {

                // If the index is in the supplied array...
                if (index in contexts) {

                    // Call the string extension function.
                    extendString();

                    // Define the context to use during the next string extension.
                    nextContext = {
                        index: index,
                        key: index,
                        value: contexts[index]
                    };

                }

            }

        // If a map list was supplied...
        } else if (contexts instanceof Map) {

            // For each entry in the supplied map...
            for (const [key, value] of contexts) {

                // Call the string extension function.
                extendString();

                // Define the context to use during the next string extension.
                nextContext = {
                    index: index,
                    key: key,
                    value: value
                };

                // Increment the counter.
                index++;

            }

        // If an iterable list was supplied (including set lists)...
        } else if (typeof contexts[Symbol.iterator] === "function") {

            // Get an iterator from the iterable.
            const iterator = contexts[Symbol.iterator]();

            // Create a variable to hold the iterator's next return.
            let next;

            // Do the following...
            do {

                // Iterate and update the variable.
                next = iterator.next();

                // If there is anything left to iterate...
                if (!next.done) {

                    // Call the string extension function.
                    extendString();

                    // Define the context to use during the next string extension.
                    nextContext = {
                        index: index,
                        key: index,
                        value: next.value
                    };

                    // Increment the counter.
                    index++;

                }

            // ... until there is nothing left to iterate.
            } while (!next.done);

        // If a list other than an array, map, or iterable was supplied...
        } else {

            // For each key in the supplied object...
            for (const key of Object.keys(contexts)) {

                // Call the string extension function.
                extendString();

                // Define the context to use during the next string extension.
                nextContext = {
                    index: index,
                    key: key,
                    value: contexts[key]
                };

                // Increment the counter.
                index++;

            }

        }

    }

    // Call the string extension a final time now that the last supplied context has been encountered.
    extendString(true);

    // Return the fully-extended string.
    return string;

});

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

@karlvr , Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊΠ°Ρ€Ρ‚. Π§Π°ΡΡ‚ΡŒ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΡƒΠΆΠ΅ Ρ€Π΅ΡˆΠ΅Π½Π°, ΠΈ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ с чистого листа.

ВсС 6 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ сСйчас, с # 1557

@nknapp ΠΏΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ рСализация Π² # 1557 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Map . Π’ настоящСС врСмя ΠΎΠ½ создаСт ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΉΡΡ элСмСнт, ΡΠ²Π»ΡΡŽΡ‰ΠΈΠΉΡΡ _entry_ Π² Map , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся ΠΊΠΎΡ€Ρ‚Π΅ΠΆΠ΅ΠΌ [key, value] , Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° Π΄Π΅Π»Π°Π΅Ρ‚ повторяСмый элСмСнт value ΠΈ устанавливаСт @key , Ρ‡Ρ‚ΠΎ я _Π΄ΡƒΠΌΠ°ΡŽ_ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π΅Π΅. Для мСня это ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π΅Π΅!

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, каТСтся, Ρ‡Ρ‚ΠΎ выраТСния Π² настоящСС врСмя Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Map , поэтому Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ {{person.myMap.myMapKey}} . Π― сСйчас большС вникаю Π² этот вопрос.

Π‘ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ lookupProperty Π² runtime.js ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΊΠ°Ρ‚ΡŒ свойства Π² Map s:

    lookupProperty: function(parent, propertyName) {
      if (parent instanceof Map) {
        return parent.get(propertyName)
      }

Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ​​поддСрТку?

@karlvr Π― Π΄ΡƒΠΌΠ°ΡŽ, вашС ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ заслуТиваСт внимания. Но я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ это ΠΎΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ.

@karlvr , Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊΠ°Ρ€Ρ‚. Π§Π°ΡΡ‚ΡŒ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΡƒΠΆΠ΅ Ρ€Π΅ΡˆΠ΅Π½Π°, ΠΈ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ с чистого листа.

@nknapp большоС спасибо Π·Π° быстрый ΠΎΡ‚Π²Π΅Ρ‚; Π― Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ сдСлал PR с ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ измСнСниями. МоТСм Π»ΠΈ ΠΌΡ‹ ΠΎΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ Ρ‚Π°ΠΌ? β„–1679

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ