Vraag Selecteer weergavesjabloon op modeltype / objectwaarde met Ember.js


Ik wil verschillende objecten in dezelfde array met controllercontent opslaan en elke array een geschikte weergavesjabloon geven, maar idealiter dezelfde weergave.

Ik voer lijstvoorwerpen uit gebruikend de code hieronder. Ze zijn momenteel identiek, maar ik zou graag verschillende kunnen gebruiken.

<script type="text/x-handlebars">
  {{#each App.simpleRowController}}
    {{view App.SimpleRowView class="simple-row" contentBinding="this"}}
  {{/each}}
</script>

Een versimpelde versie van de weergave is hieronder. De andere functies die ik niet heb opgenomen, kunnen alle objecten worden gebruikt, ongeacht het model. Dus zou ik idealiter één weergave hebben (hoewel ik enkele artikelen over mixins heb gelezen die zouden kunnen helpen, zo niet).

<script>
  App.SimpleRowView = Em.View.extend({
    templateName: 'simple-row-preview',
  });
</script>

Mijn eerste paar tests om verschillende objecttypes toe te staan, eindigden met heel veel omstandigheden binnen 'simple-row-preview' - het zag er vreselijk uit!

Is er een manier om de templateName of de weergave die wordt gebruikt tijdens het itereren over mijn contentarray dynamisch te beheren?

BIJWERKEN

Hartelijk dank aan de twee respondenten. De uiteindelijke code die in de weergave wordt gebruikt, staat hieronder. Sommige van mijn modellen zijn vergelijkbaar, en ik vond het een goed idee om te kunnen schakelen tussen een sjabloon (of een soort 'staat') in mijn applicatie.

<script>
  App.SimpleRowView = Em.View.extend({
    templateName: function() {
      return Em.getPath(this, 'content.template');
    }.property('content.template').cacheable(),
    _templateChanged: function() {
      this.rerender();
    }.observes('templateName'),
    // etc.
  });
</script>

32
2018-04-03 18:20


oorsprong


antwoorden:


U kunt van sjabloonnaam een ​​eigenschap maken en vervolgens berekenen welke sjabloon u wilt gebruiken op basis van de inhoud.

Dit gebruikt bijvoorbeeld instanceof om een ​​sjabloon in te stellen op basis van het type object:

App.ItemView = Ember.View.extend({
    templateName: function() {
        if (this.get("content") instanceof App.Foo) {
            return "foo-item";
        } else {
            return "bar-item";
        }
    }.property().cacheable()
});

Hier is een viool met een werkend voorbeeld van het bovenstaande: http://jsfiddle.net/rlivsey/QWR6V/


102
2018-04-03 19:25



Op basis van de oplossing van @rlivsey, heb ik de functionaliteit toegevoegd om de sjabloon te wijzigen wanneer een eigenschap verandert, zie http://jsfiddle.net/pangratz666/ux7Qa/

App.ItemView = Ember.View.extend({
    templateName: function() {
        var name = Ember.getPath(this, 'content.name');
        return (name.indexOf('foo') !== -1) ? 'foo-item' : 'bar-item';
    }.property('content.name').cacheable(),

    _templateChanged: function() {
        this.rerender();
    }.observes('templateName')
});

16
2018-04-04 07:39