Handlebars.js : Πρόσβαση σε parent objects μέσα σε μια λίστα

[chrism4111]

Παρακαλώ λίγο τα φώτα σας εδώ.

Ας δούμε τώρα τι εννοώ

Χρησιμοποιώ Handlebars για να ορίσω κάποια templates ή τελος πάντων κάποια partials κάποιων templates.

Στην περίπτωση μου το datasource το οποίο εφαρμόζετε πάνω τους και εν τέλει να κάνει compile το handlebars το template είναι κάπως έτσι.

 

$datasource = {
      offers: {
           1: {id: 1, unit_id: 101},
           2: {id: 2, unit_id: 122}
      },
      units: {
           101: {id: 101, name: 'UNIT101'},
           122: {id: 122, name: 'UNIT122'}
      }
};

Δυστηχώς δεν έχω την δυνατότητα να αλλάξω το datasource διότι έτσι μου το στέλνει ο Server και να το κάνω χειροκίνητα δεν θα έχει νόημα περισσότερο λόγο Performance.

Οπότε και το πρόβλημα μου είναι το εξής:
Στο template θέλω να εκτελέσω μια each στο offers και να έχω μέσω στοιχείων του offer πρόσβαση στο units object λίγο πολύ φαίνεται ότι τα δύο αυτά objects έχουν συσχέτιση μεταξύ τους.

Ξέρω ότι μπορώ να αποκτήσω πρόσβαση στο units με τον εξής τρόπο

{{../units}} 

Αλλά δεν μπορώ να καλέσω δυναμικά κάποιο κλειδί του Object αυτού.
Έχω προσπαθήσει να κάνω αυτό
 

<ul>
    {{#each offers}}
          <li>{{../offers.[this.id].name}}</li>
    {{/each}} 
</ul> 

Αλλά για κάποιον περίεργο λόγο μου βγάζει error το handlebars. 


Ευχαριστώω

[alou]

Κάτι τέτοιο εννοούσες μάλλον

<ul>
  {{#each offers}}
    <li>{{ ../units[unit_id].name }}</li>
  {{/each}}
</ul>

που φαίνεται λογικό σε javascript αλλά είναι τελείως διαφορετικό όταν γίνεται interpolate στο template.

 

Θες ένα helper που θα πάρει τις τιμές στο loop και θα στου επιστρέφει αυτό που θες, πχ

Handlebars.registerHelper('getUnits', function(obj, prop) {
  var tpl = "";
  for (var unitId in obj) {
    if (obj[unitId].id ===prop) {
      tpl += "<li>" + obj[unitId].name + "</li>";
    }
  }
  return new Handlebars.SafeString(tpl);
});

που θα παίζει με το data structure σου σε ένα τέτοιο template:

<script type="text/handlebars-template" id="handlebars-template">
<ul>
    {{#each offers}}
          {{getUnits ../units this.unit_id }}</li>
    {{/each}}
</ul>
</script>

Όλο μαζί εδώ

 

http://codepen.io/alou/pen/RWwYPj

[chrism4111]

Thnks για τον χρόνο σου, (και για το pen),

Είχα φτιάξει καμιά δεκάρια helpers και για άλλες συσχετίσεις αλλά μάλλον θα γίνουν ένας. Προφανώς και ο helper που έγραψες κάνει την δουλειά του και με το παραπάνω. (Είμαι νέος ακόμη στο handlebars).

Thnks και πάλι.

[alou]

καλή συνέχεια