Dart：可觀察變量不更新

我有一個Dart應用程序，我需要根據從JSON請求返回的內容設置多個字段。我正在擴展PolymerElement並使用@observable來保持字段同步。我想要做的就是設置一個全局變量，並驅動類級變量。我確定我錯過了一些基本的東西，但是我不能訪問被HTML使用的對象，因爲它沒有被實例化（或者沒有？）。Dart：可觀察變量不更新

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>

來源

2013-10-08 jmoneystl

編輯 - 工作示例

你真正的問題是

@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是不是一個有效的URL，所以我檢查，以確保該網址傳回你的期望和JSON結構是正確的。否則，它應該工作。

來源

2013-10-09 21:07:32 Nathanial

是的，這當然有效！那麼我的問題是我正在使用未來？幾乎看起來他們需要花費很長時間，HTML在嘗試完成之前會嘗試更新。但是我認爲，有未來的整個觀點是，如果一個過程需要時間來完成，那就沒問題。我還能如何確保我的JSON已被檢索？ – jmoneystl

用一個使用HttpRequest未來的工作示例更新了我的答案。 – Nathanial

Dart：可觀察變量不更新

回答

相關問題