Using repeat.for gives an error Parser Error: Unconsumed token in custom element

I am trying to iterate over an array of objects where the viewmodel and view are a custom element and I am getting the following error.

aurelia-binding.js:2857 Uncaught (in promise) Error: Parser Error: Unconsumed token { at column 1 in expression [${model.jobs}]
at ParserImplementation.err (aurelia-binding.js:2857)
at ParserImplementation.parseBindingBehavior (aurelia-binding.js:2392)
at Parser.parse (aurelia-binding.js:2349)
at SyntaxInterpreter._for [as for] (aurelia-templating-binding.js:611)
at SyntaxInterpreter.interpret (aurelia-templating-binding.js:461)
at TemplatingBindingLanguage.createAttributeInstruction (aurelia-templating-binding.js:721)
at ViewCompiler._compileElement (aurelia-templating.js:3015)
at ViewCompiler._compileNode (aurelia-templating.js:2776)
at ViewCompiler._compileElement (aurelia-templating.js:3096)
at ViewCompiler._compileNode (aurelia-templating.js:2776)
err @ aurelia-binding.js:2857
parseBindingBehavior @ aurelia-binding.js:2392
parse @ aurelia-binding.js:2349
_for @ aurelia-templating-binding.js:611
interpret @ aurelia-templating-binding.js:461
createAttributeInstruction @ aurelia-templating-binding.js:721
_compileElement @ aurelia-templating.js:3015
_compileNode @ aurelia-templating.js:2776
_compileElement @ aurelia-templating.js:3096
_compileNode @ aurelia-templating.js:2776
_compileElement @ aurelia-templating.js:3096
_compileNode @ aurelia-templating.js:2776
_compileElement @ aurelia-templating.js:3096
_compileNode @ aurelia-templating.js:2776
_compileElement @ aurelia-templating.js:3096
_compileNode @ aurelia-templating.js:2776
_compileNode @ aurelia-templating.js:2798
compile @ aurelia-templating.js:2745
(anonymous) @ aurelia-templating.js:3479
Promise.then (async)
processChanges @ aurelia-templating-resources.js:161
push.aurelia-templating-resources.Compose.bind @ aurelia-templating-resources.js:73
bind @ aurelia-templating.js:3720
bind @ aurelia-templating.js:1672
push…/node_modules/aurelia-slickgrid/dist/native-modules/services/aureliaUtil.service.js.AureliaUtilService.createAureliaViewModelAddToSlot @ aureliaUtil.service.js:24
push…/node_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.RowDetailViewExtension.renderViewModel @ rowDetailViewExtension.js:351
(anonymous) @ rowDetailViewExtension.js:166
Event.notify @ slick.core.js:189
(anonymous) @ slick.rowdetailview.js:535
Event.notify @ slick.core.js:189
push…/node_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.RowDetailViewExtension.notifyTemplate @ rowDetailViewExtension.js:233
(anonymous) @ rowDetailViewExtension.js:271
step @ rowDetailViewExtension.js:37
(anonymous) @ rowDetailViewExtension.js:18
fulfilled @ rowDetailViewExtension.js:9
Promise.then (async)
step @ rowDetailViewExtension.js:11
(anonymous) @ rowDetailViewExtension.js:12
push…/node_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.__awaiter @ rowDetailViewExtension.js:8
push…/node_modules/aurelia-slickgrid/dist/native-modules/extensions/rowDetailViewExtension.js.RowDetailViewExtension.onProcessing @ rowDetailViewExtension.js:241
gridOptions.rowDetailView.process @ rowDetailViewExtension.js:105
expandDetailView @ slick.rowdetailview.js:497
handleAccordionShowHide @ slick.rowdetailview.js:549
toggleRowSelection @ slick.rowdetailview.js:426
handleClick @ slick.rowdetailview.js:245
Event.notify @ slick.core.js:189
trigger @ slick.grid.js:2527
handleClick @ slick.grid.js:4436
dispatch @ jquery.js:5237
push…/node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js.$event.dispatch @ jquery.event.drag-2.3.0.js:382
elemData.handle @ jquery.js:5044

Here is my template code.

			<ul>
				<li repeat.for="job of ${model.jobs}">${job.jobNo}</li>
			</ul>

The object is part of a larger model however here is my custom elements viewmodel:

import { bindable, autoinject } from "aurelia-framework";
import {
    AureliaGridInstance,
    Column,
    GridOption
} from 'aurelia-slickgrid';

@autoinject
export class ClientIndexDetailViewCustomElement {
    @bindable detailViewRowCount = 7;
    aureliaGrid: AureliaGridInstance;
    gridOptions: GridOption;
    columnDefinitions: Column[];
   

    @bindable() model: {
        id: number;
        clientNo: number;
        company: boolean;
        isWarrantyCompany: boolean;
        CompanyName: string;
        ClientFirstName: string
        ClientLastName: string
        MobilePhone: string
        DateCreated: string
        DeActivated: string
        NumberOfJobs: string
        Active: boolean
        Activity: boolean
        Address: any
        jobs: any[]
    };

    bind(bindingContext, overrideContext) {


        if (bindingContext.model) {
            this.model = bindingContext.model;
            console.log("client-detail-MODEL 1: ", this.model);
        } else if (overrideContext && overrideContext.bindingContext && overrideContext.bindingContext.model) {
            this.model = overrideContext.bindingContext.model;
            console.log("client-detail-MODEL 2: ", this.model);
        } else if (overrideContext && overrideContext.parentOverrideContext && overrideContext.parentOverrideContext.bindingContext && overrideContext.parentOverrideContext.bindingContext.model) {
            this.model = overrideContext.parentOverrideContext.bindingContext.model; {
                console.log("client-detail-MODEL 3: ", this.model);

            }
        }
    }
}

I have found that all the other variables are accessible via just putting in say ${model.clientNo} but if I try any form of repeat.for, in this case on jobs[] I get the above error regarding unconsumed token.

I have been working with a model that has three “jobs”. If I look at this in the console they display as

1. jobs: Array(3)

  1. 0: {id: 20, jobNo: 1503, agentJobNo: "27126", jobType: "Dishwasher-Changeover", status: "Job Completed", …}
  2. 1: {id: 21, jobNo: 1502, agentJobNo: "218813", jobType: "Commercial Ref-Install", status: "Job Completed", …}
  3. 2: {id: 22, jobNo: 1501, agentJobNo: "220081", jobType: "Oven-Domestic repair", status: "Job Completed", …}

If I place ${model.jobs} in the view by itself I get:

[object Object],[object Object],[object Object]

So, given the fact this is a custom element and I have a bound variable how can I use repeat.for to iterate over an array of objects when I am in a custom element?

I found this but it didnt elaborate regarding $parent etc…

1 Like

Hello @si2030, I would guess that it is complaining about the ${…}, I would expect it to be just repeat.for=“job of model.jobs”

1 Like

Yep… it was that easy… thanks.

1 Like