Seeming to set a 1-directional databind even though it should be bidirectional

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

Answered By – Günter Zöchbauer

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *