@tracked number not updating template in octane app

ASH-Anthony commented 5 years ago

In the component below, totalWithDiscount and total are not updated in my template, despite the fact that if I add {{this.cart.total}} to the template, I can see the total change when removeItem is triggered.

export default class CartController extends Controller {
    @service cart

    @tracked tax = 0
    @tracked discount = 0

    get totalWithDiscount(){
        return (this.cart.total * ((100-this.discount)/100)).toFixed(2)
    }

    get total(){
        return (this.totalWithDiscount * (1 + (this.tax / 100))).toFixed(2)
    }

    @action
    removeItem(item){
       this.cart.remove(item)
    }
}

However, if I add a local cartTotal property and update that in the component, it works. This feels like an added step though.

export default class CartController extends Controller {
...
+ @tracked cartTotal =this.cart.total

    get totalWithDiscount(){
-        return (this.cart.total * ((100-this.discount)/100)).toFixed(2)
+       return (this.cartTotal * ((100-this.discount)/100)).toFixed(2)
    }

    get total(){
        return (this.totalWithDiscount * (1 + (this.tax / 100))).toFixed(2)
    }

    @action
    removeItem(item){
       this.cart.remove(item)
+     this.cartTotal = this.cart.total

    }
}

While I doubt the issue is in the service (remember, the template shows the updated total), here is the service

export default class CartService extends Service {
    @tracked items = [];
    @service store

    @mapBy('items', 'price') prices

    @sum('prices') total

    add(item) {
      this.items = [...this.items, item]
    }

    remove(item) {
        const newItems=this.items.filter(band => band.id !== item.id)
        this.items = newItems
    }

}

Am I missing something small? From reading the Octane docs, tracked and computed props in other classes should work just like tracked props in the component, right?

pzuraq commented 5 years ago

Hey @ASH-Anthony! I'm having trouble reproducing this locally, can you check to see which version of Ember Canary you are using? There have been lots of changes with tracked properties lately, so if you're using an older version of it it's possible that the issue has already been fixed. Thanks for reporting this!

ASH-Anthony commented 5 years ago

I'm using the latest canary release with an Octane blueprint and still seeing this issue. Here's my package.json

{
  "name": "octane-demo",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for octane-demo goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test"
  },
  "devDependencies": {
    "@ember/optional-features": "^0.7.0",
    "@glimmer/component": "^0.14.0-alpha.3",
    "babel-eslint": "^8.0.2",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^1.2.20",
    "ember-cli": "github:ember-cli/ember-cli#1dc682ea479b084d7f03215c6c554138ed4bf76b",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.7.0",
    "ember-cli-dependency-checker": "^3.0.0",
    "ember-cli-eslint": "^5.0.0",
    "ember-cli-htmlbars": "^3.0.0",
    "ember-cli-htmlbars-inline-precompile": "^2.0.0",
    "ember-cli-inject-live-reload": "^2.0.1",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-data": "github:emberjs/data#1df833396855d956b817540923dd89338463fec2",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^2.0.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^4.1.2",
    "ember-resolver": "^5.1.3",
    "ember-source": "https://s3.amazonaws.com/builds.emberjs.com/canary/shas/1cb5f677e6d980b6e14986b5fdf1f98536f5a214.tgz",
    "ember-welcome-page": "^3.2.0",
    "eslint-plugin-ember": "^6.0.1",
    "eslint-plugin-node": "^8.0.1",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.0"
  },
  "engines": {
    "node": "6.* || 8.* || >= 10.*"
  }
}

P.S.: Thank you so much for your series of Octane posts. They've been a great resource for getting us ready for Octane.

ASH-Anthony commented 5 years ago

I found the fix, although I'm not sure if it's a bug or not, since, as I understand it, computeds and macros should be tracked. The issue was that my service used a macro for total; when I use a native getter, the template updates when the remove method is called. However, if I log the value of total in my service (when using macros), it gets updated correctly; the template itself does not update.

export default class CartService extends Service {
    @tracked items = [];

-    @mapBy('items', 'price') prices

-    @sum('prices') total
+    get total(){
+        return this.items.reduce((acc, item) => acc + item.price, 0)
+    }

    add(item) {
      this.items = [...this.items, item]
    }

    remove(item) {
        const newItems=this.items.filter(band => band.id !== item.id)
        this.items = newItems
    }

}

pzuraq commented 5 years ago

Yeah, the computeds definitely should be autotracked, and your original example should work. When I tried to recreate this locally, I set up everything the way you've described and copied the class code, but everything was updating correctly 😕 a reproduction would be very helpful, would definitely like to tracked this down.