CODEWITHSUNDEEP
polymerpolymer-1.0
frontenddevelopper
frontenddevelopper

Reputation: 5

polymer 1 the observer is not fired when the one property of an object in a behavior is modified

When selectedWidget.id value is changed the observer doesn't detected the change.

This observer:

observers: ['functionOberveId(selectedWidget.id)'],

The code hola-mundo.html is:

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./hidding-behaviour.html">
<dom-module id="hola-mundo">
	<style>
		h1{
			color: blue;
		}
	</style>
	<template>
		<h1>hello world</h1>
		<button on-click="changeValuebahviourId">changeValuebahviourId</button>
		<button on-click="showValuebehaviourId">showValuebahviourId</button>
		
	</template>

	<script>
		Polymer({
			is: "hola-mundo",
			behaviors: [Hidding],
			observers: ['functionOberveId(selectedWidget.id)'],
			
			
			functionOberveId: function(){
				console.log("the observer is working fine")
				console.log("the id value in behaviour is: " + this.selectedWidget.id)
			},
			
			changeValuebahviourId: function(){
				this.selectedWidget.id= (this.selectedWidget.id +1)
			},	
			showValuebehaviourId: function(){
				console.log("the id value in behaviour is: " + this.selectedWidget.id)
			},	
		});
	</script>
</dom-module>

The code hidding-behaviour.html is:

<script>
    Hidding = {        
        properties:{
            selectedWidget: {
                type: Object,
                value: {
                    item: null,
                    id: 0,
                },
            },
        },
        
    }
</script>

The index.html code is:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prueba de index</title>
	<script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
	<link rel="import" href="./hola-mundo.html">
</header>
<body>

	<hola-mundo></hola-mundo>
</body>
</html>

Why does the observer isn't shooted when we press the button "changeValuebahviourId"?

I would appreciate help in this I have been reviewing it for a long time and I can not find a solution.

Thank you very much.

Upvotes: 0

Views: 220

Answers (1)

Pascal L.
Pascal L.

Reputation: 1259

Polymer needs to know that something changed so insted of calling

this.selectedWidget.id= (this.selectedWidget.id +1)

Use this:

this.set('selectedWidget.id', this.selectedWidget.id +1);

Documentation polymer

Upvotes: 1

Related Questions