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

Edit - Рабочий пример

Ваш реальный вопрос в том, что

@observable String product_name = g_product_name;

не установлен product_name в g_product_name, он устанавливает product_name к значению от g_product_name во время присвоения, которое равно null. Изменение значения 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); 

}

Это работает для меня. Я заменил ваш main в файле order_item.dart следующим и обновил элемент заказа до foobar.

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

Очевидно example.org/add_item.json не работает URL, так что я бы проверить, чтобы убедиться, что URL возвращает то, что вы ожидаете, и структура JSON является правильным. В противном случае он должен работать.

источник

2013-10-09 21:07:32 Nathanial

Да, это конечно работает!Так ли моя проблема в том, что я использую фьючерсы? Похоже, что они занимают слишком много времени, и HTML пытается обновить, прежде чем они будут выполнены. Но я думал, что весь момент с фьючерсами заключается в том, что все в порядке, если процесс требует времени, чтобы закончить. Как еще я смогу обеспечить, чтобы мой JSON был извлечен? – jmoneystl

Обновлен мой ответ рабочим примером, использующим фьючерсы HttpRequest. – Nathanial

Dart: Наблюдаемая переменная не обновляется

ответ

Смежные вопросы