Question

我知道这是所有PRE-ALPHA代码所以我可能无法得到答案。

我正在开展这个项目：https://github.com/dannymk/AdminInterface

我根本无法显示标签。事实上，当我检查页面上的元素时，tabs-widget模板似乎呈现为“原始”。

当我使用静态值时，标签会起作用，但这并不是很有用。

我哪里错了？

小部件：http://dart-lang.github.io/widget.dart/

    <!-- wgp-contentpanel.html -->
<link rel="import" href="packages/widget/components/modal.html">
<link rel="import" href="packages/widget/components/tabs.html">
<polymer-element name="wgp-contentpanel" attributes="contentpanelactive title">
   <template>
      <link rel="stylesheet" href="/AdminInterface/web/css/bootstrap/css/bootstrap.min.css">
      <modal-widget id="modal_content_panel">
          <div class="modal-header">
             <button on-click="{{ closeContentPanel }}" type="button" data-dismiss="modal" class="close" aria-hidden="true">&times;</button>
             <p>{{ title }}</p>
          </div>
          <div class="modal-body">
             <tabs-widget>
                <template repeat="{{ tab in tabs }}>">
                   <li class="{{ tab.active }}">
                      <a href="#{{ tab.id }}" data-toggle="tab">{{ tab.title }}</a>
                   </li>
                </template>
                <template repeat="{{ tab in tabs }}>">
                   <p id="{{ tab.id }}">{{ tab.content }}</p>
                </template>
             </tabs-widget>
          </div>
      </modal-widget>
   </template>
   <script type="application/dart" src="wgp-contentpanel.dart"></script>
</polymer-element>

// wgp-contentpanel.dart 
import 'package:polymer/polymer.dart';

@CustomTag('wgp-contentpanel')
class WGPContentPanel extends PolymerElement{
   bool get applyAuthorStyles => true;  
   bool get resetStyleInheritance => true; 
   @published String title = "";
   @published bool contentpanelactive = false;

   @observable List tabs = toObservable([{ "active" : true,
                                   "id" : "one",
                                "title" : "First",
                              "content" : "First tab content"
                             },
                             { "active" : false,
                                   "id" : "two",
                                "title" : "Second",
                              "content" : "Second tab contents"
                             }]);

   WGPContentPanel.created() : super.created();

   contentpanelactiveChanged(){
      if ( this.contentpanelactive ){
         var modal = $['modal_content_panel'];
         modal.show();

      }

   }

   closeContentPanel(){
      this.contentpanelactive = false;

   }

}

如果我更换tab-widget模板，那么效果很好：

          <tabs-widget>
            <li class="active"><a href="#tab1">First</a></li>
            <p id="tab1">First tab contents</p>
            <!-- template repeat="{{ tab in tabs }}>">
               <li class="{{ tab.active }}">
                  <a href="#{{ tab.id }}" data-toggle="tab">{{ tab.title }}</a>
               </li>
            </template>
            <template repeat="{{ tab in tabs }}>">
               <p id="{{ tab.id }}">{{ tab.content }}</p>
            </template -->
         </tabs-widget>

Answer 1

答案很简单： GitHub的0.3.0-dev版本正在开发中。作者正致力于支持Polymer.dart，因此在修复它们之前，某些功能将不起作用。

当然，请尝试访问项目website，其中标签也不起作用。

如果你想使用widget.dart中的标签，我推荐使用pub.dartlang.org中较旧的0.2.7版本，该版本运行良好，但它基于不推荐使用的Web UI。

作者的GitHub上已经存在一个问题repository。如果您想贡献，可以添加Pull请求。

Answer 2

使用正确的Dart语法来引用地图元素。我使用“object.key”而不是“object ['key']”，经验教训：在Perl，Java，Javascript和Dart之间跳转时，请确保在报告错误之前验证语法： - ）

选项卡小部件无法正确显示

2 个答案: