Question

我正在试图弄清楚这里发生了什么。我一直在编写一个使用Jeremy Fairbank's two-way data binding between Backbone views and Polymer webcomponents的项目。它一直很好用，直到我开始升级到Polymer 1.0。

考虑这个例子。当组件在html中声明时，它应该正常工作。当它是Backbone视图的一部分时，它不起作用。有什么想法在这里发生了什么？

JS Fiddle example

HTML

    <link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id='test-component'>
    <template>
        <h3>Name</h3>
        <div>Hello, my name is {{name}}</div>
    </template>
    <style>
        :host {
            display: block;
            border: 1px solid red;
            padding: 5px;
        }
    </style>
</dom-module>

    <script id="template-test-layout" type="text/template">
        <div id="spot1">spot1</div>
        <div id="spot2">spot2</div>
    </script>

    <script id="template-test-view" type="text/template">
    </script>

    <test-component name="George Washington"></test-component>

    <div id="app-space"></div>

JS

// The test component
Polymer({
    is: 'test-component'
});

var TestLayout = Marionette.LayoutView.extend({
    el: "#app-space",
    template: "#template-test-layout",
    regions: {
        spot1: "#spot1",
        spot2: "#spot2"
    }
});

var TestView1 = Marionette.ItemView.extend({
    template: "#template-test-view",
    tagName: "test-component"
});

var layout = new TestLayout();
layout.render();

var testView1 = new TestView1();
layout.getRegion('spot1').show(testView1);

Web组件作为Backbone tagName - 没有影子DOM

0 个答案: