简体   繁体   中英

Ember-rails: function returning 'undefined' for my computed value

Both functions here return 'undefined'. I can't figure out what's the problem.. It seems so straight-forward??

In the controller I set some properties to present the user with an empty textfield, to ensure they type in their own data.

Amber.ProductController = Ember.ObjectController.extend ({
    quantity_property: "",
    location_property: "",
    employee_name_property: "",

//quantitySubtract: function() {
//return this.get('quantity') -= this.get('quantity_property');
//}.property('quantity', 'quantity_property')

  quantitySubtract: Ember.computed('quantity', 'quantity_property', function() {
    return this.get('quantity') - this.get('quantity_property');
  });
});

Inn the route, both the employeeName and location is being set...

Amber.ProductsUpdateRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('product', params.product_id);
  },
//This defines the actions that we want to expose to the template
  actions: {
    update: function() {
      var product = this.get('currentModel');
      var self = this; //ensures access to the transitionTo method inside the success (Promises) function
  /*  The first parameter to 'then' is the success handler where it transitions
      to the list of products, and the second parameter is our failure handler:
      A function that does nothing.  */
      product.set('employeeName', this.get('controller.employee_name_property'))
      product.set('location', this.get('controller.location_property'))
      product.set('quantity', this.get('controller.quantitySubtract()'))
      product.save().then(
        function() { self.transitionTo('products') },
        function() { }
      );
    }
  }
});

Nothing speciel in the handlebar

<h1>Produkt Forbrug</h1>
<form {{action "update" on="submit"}}>
   ...
<div>
  <label>
  Antal<br>
  {{input type="text" value=quantity_property}}
  </label>
  {{#each error in errors.quantity}}
    <p class="error">{{error.message}}</p>
  {{/each}}
</div>
<button type="update">Save</button>
</form>

get rid of the ()

product.set('quantity', this.get('controller.quantitySubtract'))

And this way was fine:

quantitySubtract: function() {
  return this.get('quantity') - this.get('quantity_property');
}.property('quantity', 'quantity_property')

Update:

Seeing your route, that controller wouldn't be applied to that route, it is just using a generic Ember.ObjectController .

Amber.ProductController would go to the Amber.ProductRoute

Amber.ProductUpdateController would go to the Amber.ProductUpdateRoute

If you want to reuse the controller for both routes just extend the product controller like so.

Amber.ProductController = Ember.ObjectController.extend ({
  quantity_property: "",
  location_property: "",
  employee_name_property: "",

  quantitySubtract: function() {
    return this.get('quantity') - this.get('quantity_property');
  }.property('quantity', 'quantity_property')
});

Amber.ProductUpdateController = Amber.ProductController.extend();

I ended up skipping the function and instead do this:

product.set('quantity', 
  this.get('controller.quantity') - this.get('controller.quantity_property'))

I still dont understand why I could not use that function.. I also tried to rename the controller.. but that was not the issue.. as mentioned before the other two values to fetches to the controller...

Anyways, thanks for trying to help me!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM