2

我有一个 Dart 应用程序，我需要在其中根据 JSON 请求返回的内容设置许多字段。我正在扩展 PolymerElement 并使用 @observable 来保持字段同步。我想要做的是设置一个全局变量并让它驱动类级别的变量。我确定我错过了一些基本的东西，但是我无法访问 HTML 正在使用的对象，因为它还没有被实例化（或者已经实例化了？）。

mobilemenu.dart

library mobilemenu;

import 'dart:html';
import 'order_item.dart' as orderitem;

main() {}

mobilemenu.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="import" href="order_item.html">
        <script src="packages/polymer/boot.js"></script>
    </head>
    <body>
        <div class="mobile-menu-product-name">
            <order-item></order-item>
        </div>
    </body>
</html>

order_item.dart

library orderitem;

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:json' as JSON;

@observable String g_product_name;

@CustomTag('order-item')
class OrderItem extends PolymerElement with ObservableMixin {
  @observable String product_name = g_product_name;
}

Map processString(String jsonString) {
  // Create a map from json string
  Map jsonParse = JSON.parse(jsonString);
  print(jsonParse);
  return jsonParse;
}

setGlobals(Map jsonMap) {
  g_product_name = jsonMap["details"][0]["product_name"];
  print(g_product_name);
}

main() {

  var baseUrl = "https://example.com/add_item.json";
  var params = window.location.search;
  var fullUrl = baseUrl + params;

  HttpRequest.getString(fullUrl)
    .then(processString)
    .then(setGlobals);

}

order_item.html

<polymer-element name="order-item">
  <template>
    <div>
      <span>{{product_name}}</span>
    </div>
  </template>
  <script type="application/dart" src="order_item.dart"></script>
</polymer-element>
4

1 回答 1

0

Edit--Working Example

Your real issue is that

@observable String product_name = g_product_name;

doesn't set product_name to g_product_name, it sets product_name to the value of g_product_name at the time of assignment, which is null. Changing the value of g_product_name does not change the value of product_name.

I got around it by making a container for your global variable and making the property observable. That way you can set OrderItem property to the same object that your global variable is set to and it will bind the template to the property in your global variable.

add_item.json

{"details": [{"product_name": "foobar"}]}

order_item.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="import" href="order_item.html">
        <script src="packages/polymer/boot.js"></script>
    </head>
    <body>
        <div class="mobile-menu-product-name">
            <order-item></order-item>
        </div>
    </body>
</html>

order_item.dart

library orderitem;

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:json' as JSON;

class GlobalVariable extends ObservableBase {
  @observable
  String g_product_name;
}
GlobalVariable globalVariable = new GlobalVariable();

@CustomTag('order-item')
class OrderItem extends PolymerElement with ObservableMixin {
  GlobalVariable _globalVariable = globalVariable;
}

Map processString(String jsonString) {
  // Create a map from json string
  Map jsonParse = JSON.parse(jsonString);
  print(jsonParse);
  return jsonParse;
}

setGlobals(Map jsonMap) {
  globalVariable.g_product_name = jsonMap["details"][0]["product_name"];
  print(globalVariable.g_product_name);
}

main() {

  HttpRequest.getString("add_item.json")
    .then(processString)
    .then(setGlobals);

}

It works for me. I replaced your main in order_item.dart with the following and it updated the order item to foobar.

main() {
  setGlobals({"details":
    [
      {
        "product_name": "foobar"
      }
    ]
  });
}

Obviously example.org/add_item.json isn't a working url, so I'd check to make sure the url is returning what you expect and the json structure is correct. Otherwise, it should work.

于 2013-10-09T21:07:32.240 回答