Issue
Been working with 2 files: my_ajax_fetcher.data/html with the data as follows:
my_ajax_fetcher.dart
@HtmlImport('my_ajax_fetcher.html')
library webserver_ajax.lib.iron_ajax;
import 'package:web_components/web_components.dart';
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/iron_ajax.dart';
import 'package:polymer_elements/iron_request.dart';
///Uses [IronAjax]
@PolymerRegister('my-ajax-fetcher')
class IronAjaxSample extends PolymerElement {
@property
String f_name;
@property
String l_name;
@property
int identification;
//IronAjax ia = querySelector('myAjaxId');
IronAjaxSample.created() : super.created(){
print("created.");
//ia.generateRequest();
}
@reflectable
void handleResponse ( [CustomEventWrapper cew, IronRequest ir] ){
print("handle response fired");
var data = ir.response;
f_name = data["f_name"];
l_name = data["l_name"];
identification = data["id"];
print("$f_name $l_name: $identification");
}
}
my_ajax_fetcher.html
<dom-module id="my-ajax-fetcher">
<template>
<iron-ajax id="myAjaxId" auto
url="http://localhost:8675/test_server/v1/users/35"
handle-as="json"
on-response="handleResponse" ></iron-ajax>
<div>First Name: {{f_name}}</div>
<div>Last Name: {{l_name}}</div>
<div>Student ID: {{identification}}</div>
</template>
</dom-module>
And when the ajax call finishes it will call handleResponse
which will set f_name
, l_name
, identification
variables. The issue is that i see the variables are set in the last line of handleResponse
.
It doesn’t set the markup according to say: First Name: Frank
at all, it is just empty. I have determined that for some reason, handleResponse
is a different scope than the other functions. How do i fix this?
Solution
In Dart you always need to use set(...)
or any other method provided by Polymer to update data.
set('f_name', data["f_name"]);
set('l_name', data["l_name"]);
set('identification', data["id"]);
In JavaScript this is not necessary for fields of a Polymer element, only for properties of complex types (custom classes, collections, …)
See also
- https://github.com/dart-lang/polymer-dart/wiki/properties#list-mutation-methods
- https://github.com/dart-lang/polymer-dart/wiki/data-binding-syntax#path-change-notification
- https://pub.dartlang.org/packages/polymer_autonotify
- https://pub.dartlang.org/packages/autonotify_observe
Answered By – Günter Zöchbauer
Answer Checked By – Katrina (FlutterFixes Volunteer)