Question

我正在尝试this article中的表单，其中一些变量是可观察的。但是，我在变量更新方面遇到了一些延迟。

例如，当我更改第一个文本字段（即“收藏号码”）时，右侧的相应JSON字符串也应实时更改，但只有在我进行第二次更改时才会更新。领域（总是落后一步）。

我很担心这会因为它会直接影响我的应用程序将发送到服务器的数据。它可能是不完整的。

我知道Dart（本机）还不能在浏览器上运行，但代码的JS编译应该以这种形式运行。那可能是什么问题？

系统和应用程序信息： Debian Linux（Jessie / Testing），内核3.14-2-amd64，Iceweasel 31.0。

编辑1：它仅在Google Chrome上正常运行。正如预期的那样，Firefox就像Iceweasel一样失败。

编辑2：添加屏幕截图。

Form screenshot 编辑3：添加代码。

ENTIRE CODE HERE

尽管有关于“更新到0.11.0.Slambook无法正常工作”的警告，但可观察变量应该正常工作，就像在Google Chrome上一样。

DART：

import 'dart:html';
import 'dart:convert';
import 'package:polymer/polymer.dart';

@CustomTag('tute-its-all-about-you')
class TuteItsAllAboutYou extends PolymerElement {

    // JSON strings, bound to HTML
    @observable String intAsJson;
    @observable String doubleAsJson;
    @observable String stringAsJson;
    @observable String listAsJson;
    @observable String boolAsJson;
    @observable String mapAsJson;

    // Data input as strings, bound to input fields
    @observable String favoriteNumber='';
    @observable String valueOfPi='';
    @observable String horrorScope='';
    @observable String favOne='';
    @observable String favTwo='';
    @observable String favThree='';
    @observable String chocolate='';

    TuteItsAllAboutYou.created() : super.created();

    void showJson(Event e, var detail, Node target) {
        // Typed data to convert to JSON
        num favNum = int.parse(favoriteNumber);
        num pi = double.parse(valueOfPi);
        var anElement = $['lovechocolate'];
        bool choco = (anElement as RadioButtonInputElement).checked;
        List<String> favoriteThings = [ favOne, favTwo, favThree ];
        Map formData = {
            'favoriteNumber': favNum,
            'valueOfPi': pi,
            'chocolate': choco,
            'horrorScope': horrorScope,
            'favoriteThings': favoriteThings
        };
        // Convert everything to JSON
        intAsJson = JSON.encode(favNum); // int
        doubleAsJson = JSON.encode(pi); // double
        boolAsJson = JSON.encode(choco); // boolean
        stringAsJson = JSON.encode(horrorScope); // string
        listAsJson = JSON.encode(favoriteThings); // list of strings
        mapAsJson = JSON.encode(formData); // map with string keys
        // and mixed values
    }

    void attached() {
        super.attached();
        _populateFromJson();
        showJson(null, null, null);
    }

    void _populateFromJson() {
        String jsonDataAsString = '''
            {
                "favoriteNumber":44,
                "valueOfPi":3.141592,
                "chocolate":true,
                "horrorScope":"virgo",
                "favoriteThings":["raindrops",
                "whiskers",
                "mittens"]
            }
        ''';
        Map jsonData = JSON.decode(jsonDataAsString);
        favoriteNumber = jsonData['favoriteNumber'].toString();
        valueOfPi = jsonData['valueOfPi'].toString();
        horrorScope = jsonData['horrorScope'];
        favOne = jsonData['favoriteThings'][0];
        favTwo = jsonData['favoriteThings'][1];
        favThree = jsonData['favoriteThings'][2];

        if (jsonData['chocolate']) {
            var anElement = $['lovechocolate'];
            (anElement as RadioButtonInputElement).checked = true;
        } else {
        var anElement = $['noloveforchocolate'];
        (anElement as RadioButtonInputElement).checked = true;
        }
    }
}

HTML：

<html>
    <head>
        <meta charset="utf-8">
        <title>It's All About You</title>
        <link rel="stylesheet" href="its_all_about_you.css">
    </head>
    <body>
        <link rel="import" href="../packages/polymer/polymer.html">
        <polymer-element name="tute-its-all-about-you">
            <template>
                <style>
                    (...)
                </style>
                <table>
                    <thead>
                        <tr>
                            <th> </th>
                            <th>Enter value</th>
                            <th>Data type</th>
                            <th>JSON string</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td align="right">Favorite number:</td>
                            <td><input type="text" value="{{favoriteNumber}}" on-input="{{showJson}}"></td>
                            <td>integer</td>
                            <td><span class="result"> {{intAsJson}} </span></td>
                        </tr>
                        <tr>
                            <td align="right">Do you know pi?</td>
                            <td><input type="text" value="{{valueOfPi}}" on-input="{{showJson}}"></td>
                            <td>double</td>
                            <td><span class="result"> {{doubleAsJson}} </span></td>
                        </tr>
                        <tr>
                            <td align="right">What's your sign?</td>
                            <td><input type="text" value="{{horrorScope}}" on-input="{{showJson}}"></td>
                            <td>String</td>
                            <td><span class="result"> {{stringAsJson}} </span></td>
                        </tr>
                        <tr>
                            <td align="right">A few of your favorite things?</td>
                            <td>
                                <input type="text" value="{{favOne}}" on-input="{{showJson}}">
                                <input type="text" value="{{favTwo}}" on-input="{{showJson}}">
                                <input type="text" value="{{favThree}}" on-input="{{showJson}}">
                            </td>
                            <td>List&lt;String&gt;</td>
                            <td><span class="result"> {{listAsJson}} </span></td>
                        </tr>
                        <tr>
                            <td align="right">I love chocolate!</td>
                            <td>
                                <input type="radio" on-change="{{showJson}}" name="chocolate" id="lovechocolate" checked>True
                                <input type="radio" on-change="{{showJson}}" name="chocolate" id="noloveforchocolate">False
                            </td>
                            <td>bool</td>
                            <td><span class="result"> {{boolAsJson}} </span></td>
                        </tr>
                    </tbody>
                </table>
                <div class="givemespace">
                    <label>All data together as a map</label><br>
                    <textarea id="mapasjson" readonly>{{mapAsJson}}</textarea>
                </div>
            </template>
            <script type="application/dart" src="tute_its_all_about_you.dart">
            </script>
        </polymer-element>
    </body>
</html>

Observable没有正确更新

0 个答案: