Skip to content
This repository has been archived by the owner on Jul 11, 2019. It is now read-only.

example of nested mdl-repeat using outer scope #37

Open
jonreyna opened this issue Oct 18, 2016 · 0 comments
Open

example of nested mdl-repeat using outer scope #37

jonreyna opened this issue Oct 18, 2016 · 0 comments

Comments

@jonreyna
Copy link

Is there an example of mdl-repeat anywhere, that uses a variable from the outer scope's variable, to iterate?

<div class="mdl-accordion-group" id="accordionGroup" mdl-repeat="element in elements">
   <template>
      <div>
         <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label">
            <i class="material-icons indicator">loop</i>
            <label class="mdl-accordion__label">{{element.hostname}}</label>
            <label class="mdl-accordion__label">{{element.loopbackip}}</label>
            <label class="mdl-accordion__label">{{element.chassis.createdAt}}</label>
            </label>
            <div class="mdl-accordion--content">
               <h5 class="mdl-accordion--header">Header</h5>
               <table class="mdl-data-table mdl-data-table--selectable mdl-shadow--2dp">
                  <thead>
                     <tr>
                        <!-- Chassis -->
                        <th class="mdl-data-table__cell--non-numeric">Chassis Name</th>
                        <th class="mdl-data-table__cell--non-numeric">Chassis Description</th>
                        <th class="mdl-data-table__cell--non-numeric">Chasiss S/N</th>
                        <!-- Module -->
                        <th class="mdl-data-table__cell--non-numeric">Module Name</th>
                        <th class="mdl-data-table__cell--non-numeric">Module Description</th>
                        <th class="mdl-data-table__cell--non-numeric">Module Version</th>
                        <th class="mdl-data-table__cell--non-numeric">Module P/N</th>
                        <th class="mdl-data-table__cell--non-numeric">Module S/N</th>
                        <th class="mdl-data-table__cell--non-numeric">Module M/N</th>
                        <th class="mdl-data-table__cell--non-numeric">Module Clei</th>
                  </thead>
                  <tbody>
                     <tr>
                        <td class="mdl-data-table__cell--non-numeric">{{element.chassis.name}}</td>
                        <td>{{element.chassis.description}}</td>
                        <td>{{element.chassis.serialNumber}}</td>
                     </tr>
                     <tr mdl-repeat="module in element.chassis.modules">
                        <td class="mdl-data-table__cell--non-numeric">{{element.chassis.name}}</td>
                        <td>{{element.chassis.description}}</td>
                        <td>{{element.chassis.serialNumber}}</td>
                        <td>{{module.name}}</td>
                        <td>{{module.description}}</td>
                        <td>{{module.version}}</td>
                        <td>{{module.partNumber}}</td>
                        <td>{{module.serialNumber}}</td>
                        <td>{{module.modelNumber}}</td>
                        <td>{{module.cleiCode}}</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </template>
</div>

In this case, modules is a List member variable of chassis.

@MdlComponentModel
@Entity()
class Chassis {
  int id;
  String name, serialNumber, description, createdAt;
  List<Module> modules;
}

@MdlComponentModel
@Entity()
class Module {
  String name = "", version, partNumber, serialNumber, description, cleiCode,
      modelNumber;
  List<SubModule> subModules;
  List<ReDIMM> reDIMMs;
  List<ReUSB> reUSBs;
  List<ReDisk> reDisks;
}

@MdlComponentModel
@Entity()
class Element {
  int id;
  String hostname, location, loopbackip, rackLocation, type;
  Hub hub;
  Chassis chassis;
}

Dartium spits out a stack trace that it can't find module though.

Uncaught Unhandled exception:
Value was missing for variable tag: module.name. (1:2959)
...ent.chassis.serialNumber}}</td> <td>{{module.name}}</td> <td>{{module.de...
                                       ^

#0      Renderer.visitVariable (package:mustache/src/renderer.dart:99:21)
#1      VariableNode.accept (package:mustache/src/node.dart:45:43)
#2      Renderer.render.<anonymous closure> (package:mustache/src/renderer.dart:58:30)
#3      List.forEach (dart:core-patch/growable_array.dart:258)
#4      Renderer.render (package:mustache/src/renderer.dart:58:13)
#5      Template.render (package:mustache/src/template.dart:40:14)
#6      Template.renderString (package:mustache/src/template.dart:33:5)
#7      MaterialRepeat.add.<add_async_body> (package:mdl/src/template/components/MaterialRepeat.dart:122:31)
#8      Future.Future.microtask.<anonymous closure> (dart:async/future.dart:144)
#9      _microtaskLoop (dart:async/schedule_microtask.dart:41)
#10     _startMicrotaskLoop (dart:async/schedule_microtask.dart:50)
#11     _ScheduleImmediateHelper._handleMutation (dart:html:49308)

Here's my pubspec.yaml.

environment:
  sdk: '>=1.0.0 <2.0.0'

dependencies:
  browser: any

  logging: any
  logging_handlers: any
  console_log_handler: any

  dart_to_js_script_rewriter: ^0.1.0
  analyzer: any
  dartson: any

  mdl: "^1.17.6"
  di: "^3.3.0"

transformers:
  - di
  - dart_to_js_script_rewriter
  - dartson
  - mdl
  - $dart2js:
      commandLineOptions: [--enable-experimental-mirrors]

Is it possible to do this with mdl-repeat? If so, I could use some help.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant