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…