Question

我有一个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>

Answer 1

修改 - 工作示例

你真正的问题是

@observable String product_name = g_product_name;

未将product_name设置为g_product_name，它会在分配时将product_name设置为g_product_name的值，即空值。 更改g_product_name的值不会更改product_name的值。

我通过为您的全局变量创建一个容器并使该属性可观察来解决它。这样，您可以将OrderItem属性设置为全局变量设置的同一对象，并将模板绑定到全局变量中的属性。

<强> 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);

}

它对我有用。我使用以下内容将order_item.dart替换为main，并将订单项更新为foobar。

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

显然example.org/add_item.json不是一个工作网址，所以我会检查以确保网址返回你所期望的并且json结构是正确的。否则，它应该工作。

Dart：Observable变量不更新

1 个答案: