CODEWITHSUNDEEP
aurelia
allencoded
allencoded

Reputation: 7275

Aurelia DataChanged Not Firing in Custom Element

I am trying to observe changed data but it doesn't seem to be working. What I am doing is changing the state object through redux in a view model that calls this custom element. 

import React from 'react';
import ReactDOM from 'react-dom';
import { customElement, inject, bindable, noView } from 'aurelia-framework';

import Groups from './groups-react/groups-container.jsx';

@noView()
@inject(Element)
@bindable('state')
@bindable('modalService')
@bindable('childViewState')
@customElement('groups-react-element')

export class GroupsReactElement {

  reactComponent = {};

  constructor(element) {
    this.element = element;
  }

  render() {
    this.reactComponent = ReactDOM.render(<Groups state={this.state} modalService={this.modalService} childViewState={this.childViewState}/>, this.element);
  }

  bind() {
    this.render();
  }

  unbind() {
    ReactDOM.unmountComponentAtNode(this.element);
  }

  dataChanged(newVal) {
    this.bind();
  }
}

When I change the state object (replacing it entirely) in my viewmodel though dataChanged is never fired in this custom element.

Upvotes: 1

Views: 136

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

There's no data property on this class. If you want to be notified when the state property changed, then you need to name the function stateChanged.

Upvotes: 4

Related Questions