Is it possible to bind computed values in Ember using .properties(...) with ember-model?

I'm attempting to utilize the .property('key') syntax in order to update a computed value within my model. The structure of my model is as follows:

App.Camera = Em.Model.extend({
    id: attr(),
    uid: attr(),
    name: attr(),
    type: attr(),
    refresh: attr(),

    thumbnailUrl384x216: function() {
        return '%@/devices/%@/thumbnail?width=384&height=216'.fmt(apiBaseUri, this.get('uid'));
    }.property('uid', 'refresh'),

    thumbnailUrlFull: function() {
        return '%@/devices/%@/thumbnail?width=1280&height=720'.fmt(apiBaseUri, this.get('uid'));
    }.property('uid', 'refresh')
});

Within my camera route, I am changing the value of the refresh variable at regular intervals. However, this change is not triggering updates for the thumbnailUrl properties. Could it be an issue with my implementation or does ember-model lack support for the .property() functionality?

I am able to observe changes to the refresh attribute in my template, indicating that it is indeed being updated. Any suggestions on what might be causing the problem?

Answer №1

I realized that the computed value wasn't updating because I forgot to incorporate the changing refresh value in the computation. Once I added that, everything started working smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Comparing Multiple Inline Scripts to a Single Conjoined Inline Script: <script type="text/javascript">/* some codeblock 1 */</script> <script type="text/javascript">/* some codeblock 2 */</script> <script type="text/javascript"& ...

Updating route from action within Vuex Store

Exploring ways to trigger a route change from the store. I attempted to import router directly into the store and use the following code: LOG_OUT({commit}){ commit('LOG_OUT__MUTATION'); router.push({ name: 'Login' }) } Unfo ...

Searching for a table element and clicking it based on its text with Protractor

<tr id="item" ng-repeat="item in itemList> <td id="code" ng-repeat="column in columns">Different Text</td> </tr> I have encountered some similar issues before, but I am still struggling to find a solution. Here is what I have at ...

What is the best way to select a specific value from JSON (Webhook) Data?

I am looking for a way to extract and store a specific value from a JSON data into a variable. Specifically, I want to save the value of Name (John) in a variable like this: var name = "". I attempted using var name = data.Name but it is not wor ...

Steps to insert an image object into a table

Note: The image in the database is named "profileImage." I want to create a dynamic image object similar to other objects when I insert this code. { label: "Image", name: "profileImage", } It will display the image endpoint as 3704545668418.PNG and ...

Steps to verify the current time and execute a task if it matches the designated time

After successfully implementing a time function which changes the value of an input text based on a specific time, I encountered an issue. Although the time function is designed to change the input text value to 1 when the time reaches 2:30:35 PM... if(b ...

Let's compare the usage of JavaScript's toUTCString() method with the concept of UTC date

When I fetch the expiry date time in UTC from the Authentication API along with a token, I use the npm jwt-decode package to extract the information. private setToken(value: string) { this._token = value; var decoded = jwt_decode(value); this._ ...

How to Fix Items Being Pushed Down by 'Particleground' Jquery Plugin Due to Z-Index and Positioning

I'm grappling with understanding z-index and positioning, despite reading various questions and articles on the topic. Currently, I'm attempting to incorporate a Jquery Plugin called 'Particleground': https://github.com/jnicol/particle ...

Encountering the error message "Unable to instantiate User: constructor not found" while testing API functionality for

Currently, I am in the process of integrating my backend with MongoDB ATLAS. In order to achieve this, I am utilizing express, mongoose, and node.js for testing purposes. Specifically, I am focusing on testing my API routes, such as adding a user. Below i ...

The Vue 3 router seems to be malfunctioning and I am quite puzzled as to why

As someone new to Vue (specifically Vue 3), I decided to test a mock Vue application. After successfully testing the default homepage, I wanted to explore creating multiple pages. Despite following tutorials step by step, I've encountered an issue whe ...

Ways to refresh a container

How do I update the box below... <div className="container team-member-tasks"> <header className="header-box"> <h1>Team Member Tasks</h1> ...after marking a task as complete using the script below. ...

Filtering out section boxes does not eliminate empty spaces

Link to Fiddle I've run into a bit of a roadblock while trying to filter my section box for a project I'm currently working on. The issue I'm facing is that instead of collapsing the first section box to display only the filtered options, i ...

Can the line "as is" be included in HTML code?

Can I incorporate the following JavaScript and JSON expressions directly into HTML code? CONTRATE > 50 && SALINC <= 50 || RETAGE >= 50 { "CONTRATE": 0, "SALINC": 0, "MARSTATUS": "single", "SPOUSEDOB": "1970-01-01" } I want to be able to ...

Tips for implementing jQuery on HTML loaded post document.ready():

I've encountered a scenario where I have multiple HTML elements being rendered by a JavaScript function on the page: <a href="#" class="test1">Test</a> <a href="#" class="test2">Test</a> <a href="#" class="test3">Test< ...

Issue with MiniCssExtractPlugin during compilation of the entry point build

We have integrated webpack into our deployment process to bundle resources efficiently. However, we are now facing a challenge as we aim to include the bundling of sass files through webpack in order to streamline our build process. The MiniCssExtractPlugi ...

What are the steps to testing an endpoint with Jasmine/Karma?

Within one of my components, there is a method that makes a call to an endpoint in the following manner... private async getRolesAsync(): Promise<void> { const roles = await this.http.get<any>('https://sample-endpoint.com').toProm ...

Utilizing JavaScript along with ASP.NET web user controls

My web user control generates specific HTML code on the client side. I am trying to reference a particular RadioButton control using JavaScript. The issue is that the RadioButton ID is dynamically generated by ASP.NET, for example, I assign the ID as 1_R ...

error occurred while looping through json array

i am encountering an issue with a code that keeps returning an "undefined" message instead of the expected HTML output. Purpose of function: the aim of the following function is to display notifications in a manner similar to those on Facebook. The code se ...

Troubleshooting a problem with Angular routing when trying to access a specific URL using

My main objective is to enable users to view products by clicking on the item itself. For each product item displayed in main.html, the URL format is like this... <a href="/products/{{ product.id }}">{{ product.title }}</a> For instance, when ...

What steps can be taken to create a progress bar in the input field that spans the entire width of its parent div, reaching

I received assistance from a friend in creating this progress bar. Everything seems to be working well, except for the fact that the progress bar is not extending to the full width of the parent div. The new width after each input tag is entered using Java ...