Ways to inform an observer of an Object's change?

Is there a way to ensure that an observer receives notification of a change, regardless of Ember's assessment of property changes?

While the ember observer pattern typically works well for me, I've encountered a specific issue where I'm uncertain whether it's a bug, a feature, or something else entirely that's causing the problem.

In this scenario, I would greatly appreciate a method like

myinstance.fireNotificationsNoMatterWhat("cache")
to address the issue, but I haven't been able to find such functionality in the code. Am I overlooking something?

Below is a sample code snippet illustrating the problem.

<!DOCTYPE html>
<html>
    <head>
        <title>emberjs notification test</title>
        <script src="jquery-1.6.1.min.js"></script>
        <script src="ember-0.9.5.min.js"></script>
        <script>
Test = Ember.Application.create({});

Test.cacheObject = Ember.Object.create({
    "cache": {},
    "add": function(key, value) {
        this.propertyWillChange("cache");

        var cache = this.get("cache");
        cache[key] = value;
        this.set("cache", cache);

        this.propertyDidChange("cache");
    },
});

Test.watcher = Ember.Object.create({
    "cacheBinding": "Test.cacheObject.cache",

    "obs": function() {
        console.log("cache has changed:");
        console.log(this.get("cache"));
    }.observes("cache"),
});

setTimeout(function() {
    Test.cacheObject.add("hello", "world");
}, 500);

setTimeout(function() {
    Test.cacheObject.add("and", "universe");
}, 1000);
        </script>
    </head>
    <body>
        <h1>emberjs notification test</h1>
        <h2>Please open your console to view the console.log output.</h2>        
    </body>
</html>

EDIT: While there are temporary solutions to the issue, I have attempted my own "fix" and explored Roy's suggestion, but I believe my fundamental question will remain unanswered until the enhancement request receives attention from the busy ember team. I am willing to wait for this if it eventually provides the functionality I require, similar to what ArrayProxy offers.

Answer №1

I have pinpointed the issue, and it's not a glitch. The problem lies in the static nature of the hash that Test.cacheObject.cache is referencing. Essentially, you are modifying properties within the same hash without actually changing the hash itself.

Refer to this jsFiddle link for a solution. In short, you simply need to replace var cache = this.get("cache"); with var cache = {};

update:

To preserve the data, consider using an array for cache and assigning key/value pairs while monitoring cache.@each. I have demonstrated this in the updated jsFiddle. Hopefully, this workaround meets your needs.

update2:

Take a look at the revised jsFiddle. I have come up with a solution that meets all your requirements after getting some rest. Remember, there is always a solution to every problem!

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

Use Javascript to toggle the display to none for a specific table row (tr)

Is there a way to implement JavaScript code that will hide a specific table row using display:none;, and then reveal it again when a button is clicked? ...

update-post-thumbnail wp-ajax return false

I have been attempting to utilize the media manager within Wordpress. I am using the post editor outside of the admin area, allowing users to create posts with a featured image. I have used the _wp_post_thumbnail_html function to display the image or provi ...

Develop an asynchronous function that can fetch a result at a later time within an Express route

I need to retrieve an Excel file from Box.com using their API and then convert the Excel data into JSON format. Afterwards, I plan to display this JSON data using Express and Handlebars. Below is the function I've created for fetching the Excel file ...

Implementing Event Listeners for buttons generated dynamically

Currently immersed in an exciting side project and encountered a small hiccup. Essentially, I have a page where users can log in to Spotify. Upon login, they are redirected to a page showcasing their top 10 artists in individual cards, complete with the ar ...

A new long polling AJAX request is triggered whenever there is a change in the parameter

function AjaxRequest(params, url) { if (params) { this.params = params; this.type = "GET"; this.url = url; // this.contentType = "multipart/form-data"; this.contentLength = params.length;; } } AjaxRequ ...

Show a Toast in React without relying on useEffect to manage the state

I have successfully implemented the Toast functionality from react-bootstrap into my application using the provided code. However, I am unsure if it is necessary to utilize useEffect to set show with setShow(items.length > 0);. Would it be simpler to ...

Issue with Angular custom directive compatibility in version 1.3.0

Check out my code snippet This code snippet is compatible with angular **1.1.3**. However, it does not function properly with 1.3.0 ...

Developing a right triangular prism with Three.js

I am working on creating a right triangular prism. Here is the current code I have: var triangleGeometry = new THREE.Geometry(); triangleGeometry.vertices.push(new THREE.Vector3(-1.0, 1.5, 0.95)); triangleGeometry.vertices.push(new THREE.Vector3(-1.0, ...

Sleek transitions for navigating between cells in a data table

I am looking to implement a smooth animation for cell navigation. Check out what I currently have: http://jsfiddle.net/0ardb3u0/ When the mouse hovers over a cell, I want the full column and row of that cell to be selected and highlighted in blue. How ...

Save property using the useState hook

I am working on implementing a sorting function in the child component, where the props are passed in from the parent through an axios call. Should I: Store the prop in the child component's useState? Pass the parent's setState function as a pro ...

Trying to assign a property to an undefined variable inside a function

At the moment, I am configuring error messages on a login page for an extension using vue, and encountering issues within the importCreds() function. data(){ return { url:'', apikey:'', error:'', } }, meth ...

Is there a way to implement this media query within my JavaScript code?

I am attempting to make my website recognize when the screen width surpasses 1096px in order to apply some CSS styling. Below is the code I'm using: var mq = window.matchMedia('@media all and (max-width: 1096px)'); if(mq.matches) { wind ...

What is the reason behind the failure of next/script with Google reCAPTCHA?

Currently, I am in the process of upgrading from next js version 8 to version 11. I wanted to take advantage of the amazing next js feature for "next/script". However, when I tried to implement it for Google reCAPTCHA using "react-recaptcha": "^2.3.10", th ...

Next.js deployments on Vercel are encountering issues with resolving local fonts

Currently, I am facing an issue while trying to incorporate next/fonts into my project in next.js 13.3. The setup works perfectly on my local machine, but as soon as I deploy it to Vercel, a build error arises with the message Module not found: Can't ...

Ways to retrieve a variable from a separate TypeScript document

A scenario arises where a TypeScript script contains a variable called enlightenFilters$: import { Component, Input, OnInit } from "@angular/core"; import { ConfigType, LisaConfig } from "app/enrichment/models/lisa/configuration.model"; ...

Swap the image source with a different image attribute when making the website responsive

I have implemented a custom attribute for the img tag in my code, such as data-tablet and data-mobil <div class="myDiv"> <img src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg"> </div> My goal is to have the image source c ...

Changing the shading of an arc in d3.js: Tips and tricks

I've been attempting to create a gauge with a needle that changes the background color of the ring for the past few days. My goal is to dynamically update the colors of an arc within a gauge I developed in d3.js This is my current gauge setup with t ...

Why does Javascript execute in this specific order?

I'm puzzled as to why JavaScript behaves in a certain way, or if I made an error in my code. How is it that the code after $.getJSON runs before the callback completes? window.ratingCallback = function(data){ if(data[0].code == 3){ ratin ...

Unfortunately, the YouTube iframe Embed feature does not have the ability to adjust audio settings on an

I've been experimenting with the YouTube iframe API and created a simple set of player controls for the YouTube player using Flash CC HTML5 canvas. The controls include a play/pause button, a draggable video bar with buffering visualization, and a vol ...

Displaying imported JSON data in a tabular format

I am struggling with writing a function in my VueJS template that sends a request to the backend API with a specific key and then displays the JSON response in a table. For example, here is a sample of the JSON data: {"driver_id":1,"driver_name":"{driver ...