Weitergabe von Variablen durch Lenker teilweise

Ich bin derzeit der Umgang mit handlebars.js in einem express.js -Anwendung. Um die Dinge modulare, ich teilte alle meine Vorlagen in der Teiltöne.

Mein problem: ich konnte nicht einen Weg finden, um die übergabe von Variablen durch eine partielle Anrufung. Lassen Sie uns sagen, dass ich teilweise die wie folgt aussieht:

<div id=myPartial>
    <h1>Headline<h1>
    <p>Lorem ipsum</p>
</div>

Nehmen wir an, ich registrierte diese teilweise mit dem Namen 'myPartial'. In einem anderen template kann ich dann etwas sagen wie:

<section>
    {{> myPartial}}
</section>

Dies funktioniert gut, die teilweise dargestellt werden, wie erwartet, und ich bin eine glückliche Entwickler. Aber was ich jetzt brauchen, ist ein Weg, um an verschiedenen Variablen, die durch diesen Aufruf, um zu überprüfen, innerhalb einer partial-zum Beispiel, wenn eine überschrift gegeben ist oder nicht. So etwas wie:

<div id=myPartial>
    {{#if headline}}
    <h1>{{headline}}</h1>
    {{/if}}
    <p>Lorem Ipsum</p>
</div>

Und der Aufruf sollte wie folgt Aussehen:

<section>
    {{> myPartial|'headline':'Headline'}}
</section>

oder so.

Ich weiß, dass ich in der Lage bin, zu definieren, alle Daten, die ich brauche, bevor ich das Rendern eines templates. Aber ich brauche einen Weg, es zu tun, wie gerade erklärt. Gibt es eine Möglichkeit?

InformationsquelleAutor der Frage Pascal Precht | 2012-07-17

173

LENKER Teiltöne nehmen Sie einen zweiten parameter, wird der Kontext für die teilweise:
```
{{> person this}}
```
In den Versionen v2.0.0 alpha-und später können Sie auch einen hash-Wert mit dem Namen parameters:
```
{{> person headline='Headline'}}
```
Sehen Sie die tests für diese Szenarien: https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462
https://github.com/wycats/handlebars.js/blob/e290ec24f131f89ddf2c6aeb707a4884d41c3c6d/spec/partials.js#L26-L32

InformationsquelleAutor der Antwort Yehuda Katz

Dies ist sehr gut möglich, wenn Sie schreiben Ihre eigenen Helfer. Wir werden mit einem benutzerdefinierten $ Helfer zu erreichen diese Art der Interaktion (und mehr):

/*///////////////////////

Adds support for passing arguments to partials. Arguments are merged with 
the context for rendering only (non destructive). Use `:token` syntax to 
replace parts of the template path. Tokens are replace in order.

USAGE: {{$ 'path.to.partial' context=newContext foo='bar' }}
USAGE: {{$ 'path.:1.:2' replaceOne replaceTwo foo='bar' }}

///////////////////////////////*/

Handlebars.registerHelper('$', function(partial) {
    var values, opts, done, value, context;
    if (!partial) {
        console.error('No partial name given.');
    }
    values = Array.prototype.slice.call(arguments, 1);
    opts = values.pop();
    while (!done) {
        value = values.pop();
        if (value) {
            partial = partial.replace(/:[^\.]+/, value);
        }
        else {
            done = true;
        }
    }
    partial = Handlebars.partials[partial];
    if (!partial) {
        return '';
    }
    context = _.extend({}, opts.context||this, _.omit(opts, 'context', 'fn', 'inverse'));
    return new Handlebars.SafeString( partial(context) );
});

InformationsquelleAutor der Antwort Jesse Houchins

Nur für den Fall, hier ist was ich getan habe zu bekommen, teilweise Argumente, Art. Ich habe einen kleinen Helfer, der nimmt einen Teil des namens und ein hash-Wert der Parameter, die übergeben werden, um die teilweise:

Handlebars.registerHelper('render', function(partialId, options) {
  var selector = 'script[type="text/x-handlebars-template"]#' + partialId,
      source = $(selector).html(),
      html = Handlebars.compile(source)(options.hash);

  return new Handlebars.SafeString(html);
});

Das wichtigste hier ist, dass LENKER Helfer akzeptieren, eine Ruby-wie hash von Argumenten. In der Helfer-code kommen Sie als Teil der Funktion das Letzte argument—options— in seiner hash Mitglied. Auf diese Weise erhalten Sie das erste argument—der Teil des namens, um die Daten nach.

Dann, werden Sie wahrscheinlich wollen, um wieder eine Handlebars.SafeString vom Helfer oder "triple‑stash"—{{{— zu verhindern, dass es doppelte Escapezeichen.

Hier ist eine mehr oder weniger vollständige Nutzung Szenario:

<script id="text-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="text" id="{{id}}"/>
</script>

<script id="checkbox-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="checkbox" id="{{id}}"/>
</script>

<script id="form-template" type="text/x-handlebars-template">
  <form>
    <h1>{{title}}</h1>
    {{ render 'text-field' label="First name" id="author-first-name" }}
    {{ render 'text-field' label="Last name" id="author-last-name" }}
    {{ render 'text-field' label="Email" id="author-email" }}
    {{ render 'checkbox-field' label="Private?" id="private-question" }}
  </form>
</script>

Hoffe, das hilft ...jemand. 🙂

InformationsquelleAutor der Antwort Vlad GURDIGA

10

Dies ist auch in späteren Versionen der LENKER mit der key=value notation:
```
 {{> mypartial foo='bar' }}
```
Sodass Sie übergeben bestimmte Werte der partiellen Zusammenhang.

Referenz: Kontext unterscheidet sich für die partielle #182

InformationsquelleAutor der Antwort cweston
5

Klingt wie Sie wollen, so etwas zu tun:
```
{{> person {another: 'attribute'} }}
```
Yehuda bereits gab dir einen Weg, das zu tun:
```
{{> person this}}
```
Aber zu klären:

Zu geben, Ihre teilweise seine eigenen Daten, so geben Sie Ihr eigenes Modell innerhalb des bestehenden Modells, etwa so:
```
{{> person this.childContext}}
```
In anderen Worten, wenn das ist das Modell, das Sie geben, um Ihre Vorlage:
```
var model = {
    some : 'attribute'
}
```
Dann fügen Sie ein neues Objekt gegeben werden, um die teilweise:
```
var model = {
    some : 'attribute',
    childContext : {
        'another' : 'attribute' //this goes to the child partial
    }
}
```
childContext wird der Kontext, der teilweise wie Yehuda sagte -, dass, es sieht nur das Feld anotheraber Sie sehen nicht (oder kümmern uns um die Bereich some). Wenn Sie hatte id in der top-level-Modell, und wiederholen Sie id wieder in die childContext, das wird nur gut funktionieren, als die teilweise nur sieht, was drin ist childContext.

InformationsquelleAutor der Antwort Chunky Bacon

Akzeptierte Antwort funktioniert großartig, wenn Sie nur wollen, zu einem anderen Kontext in Ihrer teilweise. Allerdings, es lässt Sie nicht auf irgendwelche von der übergeordneten Kontext. Übergeben Sie mehrere Argumente benötigen Sie, um schreiben Sie Ihre eigenen Helfer. Hier ist eine funktionierende Helfer für LENKER 2.0.0 (die andere Antwort funktioniert für die Versionen <2.0.0):

Handlebars.registerHelper('renderPartial', function(partialName, options) {
    if (!partialName) {
        console.error('No partial name given.');
        return '';
    }
    var partial = Handlebars.partials[partialName];
    if (!partial) {
        console.error('Couldnt find the compiled partial: ' + partialName);
        return '';
    }
    return new Handlebars.SafeString( partial(options.hash) );
});

Dann in Ihre Vorlage, die Sie tun können, so etwas wie:

{{renderPartial 'myPartialName' foo=this bar=../bar}}

Und in Ihrer teilweisen, Sie werden in der Lage sein Zugriff auf diese Werte als Kontext wie:

<div id={{bar.id}}>{{foo}}</div>

InformationsquelleAutor der Antwort Andrew C

3

Ja, ich war spät, aber ich kann nur hinzufügen, für Montieren - Benutzer: Sie können buil-in "parseJSON" Helfer http://assemble.io/helpers/helpers-data.html. (Entdeckt in https://github.com/assemble/assemble/issues/416).

InformationsquelleAutor der Antwort vasiliy0s

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.