Полимер 1, изменения в myObject в дочернем компоненте не отражаются в родительском компоненте - PullRequest
Новая
       17

Полимер 1, изменения в myObject в дочернем компоненте не отражаются в родительском компоненте

0 голосов
/ 31 мая 2018

Описание:

hola-mundo - это родительский компонент, hola-mundo2 - это дочерний компонент, MyObject совместно используется двумя привязками данных между двумя компонентами, когда мы нажимаем кнопку«changeValueMyObject», значение объекта «MyObject» изменяется в дочернем компоненте.но в родительском компоненте объект «Мой объект» не изменился.

Действия по воспроизведению ошибки:

1. Нажмите кнопку «changeValueMyObject» (этоизменить значение в дочернем компоненте)

2.-Нажать кнопку «showValueMyObject» (это показывает значение MyObject в родительском компоненте)

Ожидаемое поведение:

{id: 1, имя: "Barcelona"} отображается в консоли.

Фактическое поведение:

undefined отображается в консоли

Может кто-нибудь исправить мой код? 

<!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>

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

	<script>
		Polymer({
			is: "hola-mundo",		
			properties:{
				myObject: {
					type: Object,
					notify: true,
					observer: "projectChanged"				
				},
			},

			changeValueMyObject: function(){
				let obj ={
					id:2,
					name:'Madrid'
				}
				this.set('myObject',obj)
			},	
			
			showValueMyobject: function(){
				debugger
				console.log(this.myObject);
			},	
		});
	</script>
</dom-module>

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./hidding-behaviour.html">
<dom-module id="hola-mundo2">
	<style>
		h1{
			color: blue;
		}
	</style>
	<template>
		<h1>hello world2</h1>
		<button on-click="changeValueMyObject">changeValueMyObject2</button>
		
		
	</template>

	<script>
		Polymer({
			is: "hola-mundo2",			
			properties:{
				myObject: {
					type: Object,
					notify: true
					
				},
			},
			
			changeValueMyObject: function(){
				let obj ={
					id:1,
					name:'Barcelona'
				}
				this.set('myObject', obj);
			},	
			
			showValueMyobject: function(){
				debugger
				console.log(this.myObject);
			},	
			
		});
	</script>
</dom-module>
...