Question

我想传递一个对象数组。

我从一个自定义元素＆＃39; Store＆＃39;传递商店数组。另一个自定义元素＆＃39; store-front＆＃39;使用repeat.for语法。

我最初打电话给store-front，store并将其更改为store-front以防万一有帮助 - 但事实并非如此。

我可以将数组记录在＆＃39;存储＆＃39;自定义元素。我还记录了它的实例（它是一个数组）。

以下是错误：

aurelia-task-queue.js?26b6:44 Uncaught TypeError: Cannot set property 'undefined' of undefined
at setKeyed (aurelia-binding.js?1bbb:1923)
at AccessKeyed.assign (aurelia-binding.js?1bbb:1461)
at NameBinder.bind (aurelia-binding.js?1bbb:5174)
at View.bind (aurelia-templating.js?f83c:1396)
at Controller.bind (aurelia-templating.js?f83c:3394)
at View.bind (aurelia-templating.js?f83c:1406)
at Repeat.addView (repeat.js?1ef5:240)
at ArrayRepeatStrategy._standardProcessInstanceChanged (array-repeat-strategy.js?783a:107)
at ArrayRepeatStrategy.instanceChanged (array-repeat-strategy.js?783a:29)
at Repeat.itemsChanged (repeat.js?1ef5:136)
at BehaviorPropertyObserver.selfSubscriber (aurelia-templating.js?f83c:3645)
at BehaviorPropertyObserver.call (aurelia-templating.js?f83c:3512)
at BehaviorPropertyObserver.setValue (aurelia-templating.js?f83c:3492)
at Repeat.descriptor.set [as items] (aurelia-templating.js?f83c:3600)
at Object.setValue (aurelia-binding.js?1bbb:3539)
at Binding.updateTarget (aurelia-binding.js?1bbb:4778)
at Binding.call (aurelia-binding.js?1bbb:4793)
at SetterObserver.callSubscribers (aurelia-binding.js?1bbb:295)
at SetterObserver.call (aurelia-binding.js?1bbb:3612)
at TaskQueue.flushMicroTaskQueue (aurelia-task-queue.js?26b6:140)
at MutationObserver.eval (aurelia-task-queue.js?26b6:68)

我读过某个地方，当Aurelia附加数组观察者时，它就变成了一个对象。但我找不到任何关于如何处理这个问题的文件。

我可以将商店传递到商店html中的普通div - 但我更喜欢更模块化/可组合。

Stores.js

＆＃13;

import { customElement, useView, inject, bindable } from 'aurelia-framework'
import { EventAggregator } from 'aurelia-event-aggregator'
import { DialogService } from 'aurelia-dialog'
import { HttpClient } from 'aurelia-http-client'
import { getStoresTask, toVm } from './model'
import { getStoreTask } from './store-front/model'
import { style } from './style.css'
import { map, clone } from 'ramda'

@customElement('stores')
@useView('./stores.html')
@inject(EventAggregator, HttpClient, DialogService)
export class Stores {
  @bindable tenants
  @bindable userId
  constructor( emitter, http, modal ) {
    this.disposables = new Set()
    this.data = {}
    this.state = {}
    this.emitter = emitter
    this.http = http
    this.errors=[]
    this.style=style
  }

  attached() {
    this.reset()
    this.getStores()
  }

  getStores() {
    const onError = error =>
      console.error(error);

    const onSuccess = data => {
      this.data.stores = data
      console.log(this.data.stores)
      this.emitter.publish('loading-channel', false)
    }

    this.emitter.publish('loading-channel', true)
    getStoresTask(this.http)(this.userId).fork(onError, onSuccess)
  }

  // openModal(id) {
  //   this.this.modal.open( {viewModel: Store, model: id })
  // }

  reset() {
  }


}

＆＃13;

Stores.html

＆＃13;

<template>
  <require from="material-design-lite/material.css"></require>
  <require from="./store-front/store-front"></require>

  <div class="store-collection">
    <div class=" mdl-grid">
      <store-front repeat.for="store of data.stores" store-front.bind="store"></store-front>
    </div>
  </div>
</template>

＆＃13;

商店front.js

＆＃13;

import { customElement, useView, inject, bindable } from 'aurelia-framework'
import { DialogController } from 'aurelia-dialog'
import { HttpClient } from 'aurelia-http-client'
import { getStoreTask } from './model.js'
import { style } from './style.css'

@customElement('store-front')
@useView('./store-front.html')
@inject(HttpClient, DialogController)
export class StoreFront {
  @bindable storeFront
  constructor( http, dController ) {
    this.disposables = new Set()
    this.dController = dController
    this.store = ''
    this.id = null
    this.state = {}
    this.http = http
    this.style = style
  }

  attached() {
    this.reset()
    this.getStore()
  }

  getStore(id) {
    const onError = error => {
      console.error(error);
      this.errors.push({type:'store', msg: 'error with getting store'})
    }

    const onSuccess = store => {
      this.store = store
      this.errors['store'] = ''
      this.openModal(id)
      this.emitter.publish('loading-channel', false)
    }

    this.emitter.publish('loading-channel', true)
    getStoreTask(this.http)(id).fork(onError, onSuccess)
  }


   colorChange() {
    //  console.log(typeof this.storeColors);
      // TODO: grab  b/ style and create a fucntion that chnages the color based on another input
      changeStoreColors(this.storeColors)
   }

   reset() {
     console.log('store?',this.store)
   }

}

＆＃13;

商店front.html

＆＃13;

<template>
  <div class="mdl-cell mdl-shadow--2dp mdl-grid__item mdl-grid__item--three-div" css="${style.storeColor}" ref="storeColors[$index]"}>
    <span class="mdl-grid__item-primary-content">
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
          <path fill="#000000" d="M9,19V13H11L13,13H15V19H18V10.91L12,4.91L6,10.91V19H9M12,2.09L21.91,12H20V21H13V15H11V21H4V12H2.09L12,2.09Z" />
        </svg>
      <span>${store.name}</span>
      <span class="mdl-grid__item-text-body">
        <p>Expiration Date: ${store.expirationDate} <br>
          Notification Date: ${store.notificationDate}</p>
      </span>
    </span>
    <span class="mdl-grid__item-secondary-content">
      <a class="mdl-grid__item-secondary-action" href="#"><i class="material-icons">star</i></a>
      <button class="mdl-button mdl-button--compact mdl-button--theme-dark mdl-card__action mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" click.delegate="showStore(store._id)">MORE DETAIL</button>
    </span>
  </li>
  </div>
<template >

＆＃13;

Answer 1

<强>更新

堆栈追溯到.ref绑定。首先检查所有ref绑定。此处还有与ref和继承相关的其他问题，如果您遇到同样的问题，可以查看https://github.com/aurelia/templating/issues/533

<强>原始

看起来这一行是store.html

中的问题

<store-front repeat.for="store of data.stores" store-front.bind="data.stores"></store-front>

请注意store-front.bind=data.stores，您绑定的是数组而不是data.stores中的每个商店。

Answer 2

我很确定问题是由两件事引起的：

您正在尝试访问视图中stores的{{1}}属性，即使在数据绑定时此属性不存在。
您正在使用data回调来致电attached。

我首先为getStores对象中的stores属性创建一个空数组：

data

我转而使用this.data = { stores: [] }回调代替bind。

最后，您可能需要添加attached store-front`元素：

if.bind="data.stores.length > 0" to the

在这种情况下，将<store-front if.bind="data.stores.length > 0" repeat.for="store of data.stores" store-front.bind="store"></store-front>放在if.bind之前以使其优先。

请告诉我这是否有帮助！

Aurelia repeat.for使用custom-element抛出一个未定义的错误

Stores.js

Stores.html

商店front.js

商店front.html

2 个答案: