LENKER partielle Kontext

Ich habe ein array, das die Informationen enthält, die für die social buttons (href,alt -,. img). Ich erstellte eine partielle, würde das array Durchlaufen, und fügen Sie die Objekte, hier ist was ich habe.

array:

var social=[
    {

        "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
        "image":"IMG/media/twitter_16.png",
        "alt":"twitter link"
    },
    {
        "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
        "image":"IMG/media/twitter_16.png",
        "alt":"twitter link"
    },
    {
        "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
        "image":"IMG/media/twitter_16.png",
        "alt":"twitter link"
    }
];

Vorlage:

social_partial = '<a href="{{url}}" alt="{{alt}}"><img src="{{image}}"/></a>';

Die partielle Funktion:

Handlebars.registerPartial('addSocial',social_partial);

und der main Vorlage:

<div class="tip_social">
    {{>addSocial social}}
</div>

Ich bin immer ein 'Depth0 undefined error'. Ich habe versucht, für die Dokumentation auf parials immer einen anderen Kontext , aber ich habe noch, es zu finden.

Bearbeiten hier ist eine komplette Geige von ihm

InformationsquelleAutor alexdmejias | 2012-08-07

  1. 7

    Gleiche Problem für mich. Bisschen Graben und ein face-palm später hier ist, was ich gefunden habe.

    tl;dr-Antwort

    Werden sehr vorsichtig über den Kontext, die Sie passieren, um Ihre teilweise. Wenn Sie irgendwie übergeben Sie einen null-oder leere-Objekt zur teilweisen erhalten Sie die depth0 is undefined Fehler

    Sehr etwas längere Antwort

    JSFiddle Beispiele:

    Das einzige, was geändert in der Arbeits-version ist, die ich bin übergeben einen gültigen Kontext zu den teilweisen.

    BTW ein sehr hilfreicher trick ist die Verwendung des debug-helper von dieser blog

    Answerbot Diktator "code-Beispiel"

    <script id="parent">
 <table>
   <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
      </tr>
    </thead>
    <tbody>
    {{#each collection}}
       {{>myPartial nothingHere}} <!-- Broken context -->
    {{/each}}
    </tbody>
 </table>
</script>

    Den gebrochenen Rahmen oben verursachen LENKER zu sterben. Für dein problem versuchen zu Graben in, dass mit einer {{debug}} tag und sehen, ob das hilft.

    Für eine bessere code-Beispiel bitte werfen Sie einen Blick auf die jsFiddles. Umbuchung alle den code hier rein, formatieren Sie es, um es Recht betrachten und StackOverflow answerbot Diktator glücklich war ein bisschen viel zu tun bei der Arbeit ^_~

    InformationsquelleAutor Paul

  2. 1

    Ich bin mir nicht sicher, was du falsch machst, da man noch nicht genug code zu duplizieren problem. Jedoch, es ist nicht schwer, es zu schaffen. Zuerst von allen, ist Ihre Haupt-Vorlage iteriert social und Fütterung jedes element, um Ihre teilweise, so etwas wie dieses:

    <script id="t" type="text/x-handlebars-template">
    {{#each social}}
        <div class="tip_social">
            {{>addSocial this}}
        </div>
    {{/each}}
</script>

    Und dann können Sie Ihr HTML so etwas wie das hier:

    ​var t    = Handlebars.compile($('#t').html());
var html = t({social: social}));​​

    Demo: http://jsfiddle.net/ambiguous/SsdbU/1/

    Wie würde die Integration mit der Haupt-template-obwohl? Ich bin mir nicht sicher, was die 2. Zeile des JS bedeutet
    Ihre Haupt-template macht nicht viel Sinn, es sei denn, Sie Schleifen über social in JavaScript. Beim kompilieren einer LENKER-Vorlage, erhalten Sie eine Funktion zurück, dann führen Sie diese Funktion, um Ihre HTML.
    Nicht sicher, was du meinst im ersten Satz. Wie würde ich auf die javascript Variablen innerhalb der Vorlage? würde eine Hilfsfunktion, die die Antwort statt?
    Vielleicht, wenn Sie eine Funktions-Beispiel, das ich Ihnen helfen kann.
    mu ist zu kurz:hier ist ein Geige

    InformationsquelleAutor mu is too short

  3. 0

    Hier ist die einzige Möglichkeit die ich gefunden habe:
    LENKER doc zeigt an, dass Sie verwenden müssen, Block Helfer übergeben unterschiedlichen Kontexten. So, hier sind zwei Dateien: die Haupt Vorlage und den Skript-Knoten contening zwei Kontexten: der wichtigste Kontext und den Kontext für die sozialen Daten. Das Skript mit der Quelle für die teilweise Vorlage. Der Block ist #twitter_list und seine damit verbundenen registerHelper verwendet die option.fn(other_context_object) das scheint der einzige Weg, um pass einem anderen Kontext im LENKER.

    Main template:

    <html>
<head>
<title>Test content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div id = main>
        <!-- This is using the main context-->
        <h2> Hello {{name}}!</h2>
        <p>{{some_content}}</p>


        <!-- This is using the partial template and its own context -->
        <ul>
        {{#twitter_list}}
            {{>yourpartial}}
        {{/twitter_list}}
        </ul>

    </div>  

</body>
</html>

    Das javascript mit Node js:

    var handlebars = require('handlebars'),
fs = require('fs');

const main_context = { name: "world",
                        some_content: "Bla bla bla all my bla bla"};

const twitter_data={social:[
    {
        "url":"some url 1",
        "image":"IMG/media/twitter_1.png",
        "alt":"twitter link 1"
    },
    {
        "url":"some url 2",
        "image":"IMG/media/twitter_2.png",
        "alt":"twitter link 2"
    },
    {
        "url":"some url 3",
        "image":"IMG/media/twitter_3.png",
        "alt":"twitter link 3"
    }
]};


var partial_source = '{{#each social}}<li><a href="{{url}}" alt="{{alt}}"><img src="{{image}}"/></a></li>{{/each}}';

handlebars.registerPartial('yourpartial', partial_source);

handlebars.registerHelper('twitter_list', function(options) {
    //you need to use the options.fn to pass the specific context
    return options.fn(twitter_data);
});

fs.readFile('maintemplate1.hbs', 'utf-8', function(error, source){
  var template = handlebars.compile(source);
  var html = template(main_context);
  console.log(html)
});

    InformationsquelleAutor isacookie

Schreibe einen Kommentar