如何排除绑定故障

Question

我找到了一个很酷的项目 (RoboJS), and I forked it: Forked Repo。我的计划是尝试使用 Polymer 1.0 添加一个漂亮的前端，并在此过程中学习一些东西。

我遇到的问题是让绑定显示在我的组件中。我构建了一个非常简单的 "robot" 组件来显示游戏期间机器人的状态。

首先，我只想在标题中显示名称，但结果是空白。这是组件：

<dom-module id="robojs-robot-status">
    <template>
        <div>Robot Name <span>[[robot]]</span><span>{{test}}</span></div>
    </template>
</dom-module>

<script>
    Polymer({
        is: "robojs-robot-status",
        properties: {
            robot: {
                type: String,
                value: "testing"
            },
            test: {
                type: String,
                value: "testing2"
            }
        },
        ready: function() {
        },
        init: function() {
            console.log(this.robot);
            console.log(this.test);
        }
    });
</script>

在parent组件上，我设置了robot属性：

这是属性：

<link rel="import" href="robojs-robot-status.html">
<robojs-robot-status robot="{{robot}}"></robojs-robot-status>

而且，我有一个脚本，现在可以设置就绪事件的值：

    Polymer({
        is: "robojs-arena",
        properties: {
            robot: {
                type: String,
                value: "hello"
            }
        },
        ready: function() {
            this.games = window.roboJS.games;
            console.log(this.games);
            //this.robot = {name: "hello"};
            this.robot = "hello";
        },
        init: function() {
            console.log("******* init *******");
            console.log(this.robot);
            document.querySelector("robojs-robot-status").init();
        },
        pause: function() {
            window.roboJS.pause();
        },
        start: function() {
            console.log(window.roboJS);
            window.roboJS.resume();
        }
    });

[[robot]] 为空白。 {{test}} 绑定到 "testing2".

使用 {{robot}} 或 [[robot]] 没有区别。所以，这没有影响。

如果我删除 parent 组件中的 "robot" 属性，该值有效。它显示 "testing"。因此，它具有约束力，但与实际值无关。

除了弄清楚我在这种情况下做错了什么，是否有解决问题的好方法？我在应用程序的其他地方也遇到了类似的问题。

如果这是 Angular + jQuery，我会这样做：

$('robotjs-robot-status').scope().$eval("robot")

我可以在 Chrome 中将其输入到开发人员控制台中，然后查看它的内容并进行故障排除。我还可以在 Chrome.

中使用 Batarang 扩展

对于 Polymer，我不确定从哪里开始。任何 help/ideas?

Answer 1

如果此处发布的父代码段与代码中显示的完全相同，则可能是问题所在。

<link rel="import" href="robojs-robot-status.html">

应该在外面，比如

<dom-module id="robojs-robot">
    <link rel="import" href="robojs-robot-status.html">
    <template>
        <robojs-robot-status robotname="{{robotname}}"></robojs-robot-status>
    </template>
    <script>
        Polymer({
            is: "robojs-robot",
            ready: function() {
                console.log('setting to Dilly');
                this.robotname = "Dilly";
            },
            properties: {
                robotname: {
                    type: String,
                    value: "hello"
                }
            },
        });
    </script>
</dom-module>

然后如果状态为

<dom-module id="robojs-robot-status">
    <template>
        <div>Robot Name <span>[[robotname]]</span></div>
    </template>
    <script>
        Polymer({
            is: "robojs-robot-status",
            properties: {
                robotname: {
                    type: String,
                    value: "testing",
                    observer: '_robotnameChanged'
                }
            },

            _robotnameChanged: function(newValue, oldValue) {
                console.log('_robotnameChanged: newValue='+newValue+' oldValue='+oldValue)
            }
        });
    </script>
</dom-module>

一切都适合我。

PS：这里似乎不需要属性，因为绑定是单向的。

如何排除绑定故障

How to Troubleshooting Binding

javascript

polymer-1.0