How to Troubleshooting Binding

Question

I found a cool project (RoboJS), and I forked it: Forked Repo. My plan was to try to add a nice front end with Polymer 1.0 and learn a little in the process.

What I am having trouble with is getting the binding to show in my component. I've built a really simple "robot" component to show the status of the robot during the game.

To start, all I want to do is to show the name in the title, but it comes out blank. Here's the component:

<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>

On the parent component, I set the robot attribute:

Here's the attribute:

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

And, I have a script that, for now, sets the value on the ready event:

    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]] is blank. {{test}} binds to "testing2".

Using {{robot}} or [[robot]] doesn't make a difference. So, that doesn't have an impact.

If I remove, the "robot" attribute in the parent component, the value works. It shows "testing". So, it is binding, but not with the actual value.

Beyond figuring out what I am doing wrong in this instance, is there a good way to troubleshoot? I am having similar issues in other places in the app.

If this were Angular + jQuery, I would do something like this:

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

I could type that into the developer console in Chrome and see what it said and troubleshoot. I could also use the Batarang extension in Chrome.

With Polymer, I am not sure where to start. Any 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：这里看起来并不真正需要属性，因为绑定是单向的。