Question

我正在努力学习聚合物而且我被卡住了。我的目标是使用core-list在左侧的抽屉面板中放置一个复选框列表（选项是动态的，服务器在页面中发送JSON [在这种情况下没有AJAX]）。这就是我所拥有的：

<core-scaffold>
<core-header-panel navigation fit mode="seamed">
    <core-toolbar>Left Header</core-toolbar>
    <div fit style="overflow:auto;">
        <core-list id="list" data="{{CheckboxList}}" flex multi>
            <template>
                <div class="row {{ {selected: selected} | tokenList }}">
                    <a href="{{model.Link}}">Go</a>
                    List row: {{index}}, Name: {{model.Name}}, Title: {{model.Title}}
                    <input type="checkbox" checked="{{model.Selected}}">
                </div>
            </template>
        </core-list>
    </div>
</core-header-panel>
<div tool>Right Panel Title</div>
<div vertical layout>
   stuff...
</div>
</core-scaffold>

包装列表的div旨在消除以下错误，但没有成功：

core-list must either be sized or be inside an overflow:auto div that is sized

我已经按照我能想到的方式包装了这个列表来给它一个大小，并且似乎无法动摇这个错误信息。

我也很担心，因为文档说core-list不会呈现整个列表，只会显示元素的可见视图。这是复选框的问题，因为这需要最终提交带有选中值的表单。有没有办法覆盖此功能并强制它呈现整个列表，或者是否有替代core-list更适合重复必须呈现的元素？

Answer 1

您可以尝试将style="height:100%"用作core-list属性。我记得Rob Dodson提到core-list显然需要给出一个高度。通过这样做，我可以摆脱你提到的错误。这是jsfiddle和剪辑：

http://jsfiddle.net/kreide/zt5xmoa9/

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">

<polymer-element name="my-element" constructor="" attributes="">
    <template>
        <style>
            .selected {
                background: silver;
        }
        </style>
        <core-scaffold>
            <core-header-panel navigation fit mode="seamed">
                <core-toolbar>Left Header</core-toolbar>
                <div fit style="overflow:auto;">
                    <core-list id="list" data="{{CheckboxList}}" style="height:100%;" flex multi>
                        <template>
                            <div class="row {{ {selected: selected} | tokenList }}">
                                <a href="{{model.Link}}">Go</a>
                                List row: {{index}}, Name: {{model.Name}}, Title: {{model.Title}}
                                <input type="checkbox" checked="{{model.Selected}}">
                            </div>
                        </template>
                    </core-list>
                </div>
            </core-header-panel>
            <div tool>Right Panel Title</div>
            <div vertical layout>
               stuff...
            </div>
        </core-scaffold>
    </template>
    <script>
        Polymer('my-element', {
            CheckboxList: [{"Name": "1", "Title": "1" }, {"Name": "2", "Title": "2" }, {"Name": "3", "Title": "3" }]
        });
    </script>
</polymer-element>

<my-element></my-element>

PS：我对你的上一个问题没有答案，因为我不确定是否会呈现core-list的行为。 core-menu可能是一种替代方案，因为它来自core-selector，可能与core-list不同。但这些只是猜测而不是答案。

Answer 2

我认为，在回答您的上一个问题时，您应该将复选框的检查状态绑定到用于呈现core-list的数据的属性。这允许core-list将其表示与您在列表中保留的值的状态分开。然后，您可以在ECMAscript模型中使用该数据来执行操作或提交到URI。

core-list demo显示数据绑定到多种不同类型的输入元素。

Answer 3

我有同样的问题，我的解决方案非常简单。为：

  <section route="home" id="home">
      <div fit class="div-core-list">
        <core-list data="{{data}}" flex>
          <template>
            <div class="row">
              <div>{{model.name}}</div>
            </div>
          </template>
        </core-list>
      </div> 
  </section>

我使用过css代码：

.div-core-list {
    overflow: auto;
    height: 300px; /* can be any value in px*/
}

core-list {
    height:100%;
}

我希望它有所帮助。

聚合物如何在左侧面板中放置一个复选框列表？

3 个答案: