gpt4 book ai didi

dart - 创建聚合物 Dart 网络组件库的正确方法?

转载 作者:行者123 更新时间:2023-12-05 00:38:53 25 4
gpt4 key购买 nike

我正在尝试使用 dart 和聚合物构建一个 Web 组件库,但我无法在我的组件中进行数据绑定(bind)。

我制作了一个测试应用程序和一个库。
测试应用程序定义了一个简单的主要组件:

<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/MyLib/main_app.html">

<polymer-element name="my-launcher">
<template>
<style>

</style>

<my-main-app></my-main-app>

</template>
<script type="application/dart" src="launcher.dart"></script>
</polymer-element>

该组件导入并使用我的库中定义的 my-main-app :

<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_scaffold.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_menu.html">
<link rel="import" href="../../packages/core_elements/core_item.html">

<polymer-element name="my-main-app" >
<template>
<style>

</style>
<core-scaffold id="mainScaffold">
<core-header-panel navigation flex mode="seamed">
<core-toolbar>MYAPP</core-toolbar>

<core-menu theme="core-light-theme" selectedItem="{{mainMenuItem}}" selected="0">
<core-item icon="settings" label="Activities"></core-item>
<core-item icon="settings" label="Other"></core-item>
</core-menu>

</core-header-panel>
<div tool>Activities</div>
<div>Hello we got some action here:
<br>
<br>
<paper-button label="Toggle Drawer" on-click="{{toggleDrawer}}" raisedButton> </paper-button>
<br>

<template if="{{toggled==0}}">
Panel is shown (int) ?
</template>
<template if="{{toggled==1}}">
Panel is hidden (int) ?
</template>
</div>
</core-scaffold>

</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>

一切正常(纸质组件,单击按钮时面板抽屉切换),但条件模板没有反应。唯一的解决方法是直接使用 Observable mixin 并在我的方法中调用“deliverChanges”。

我发现的所有示例都不需要这样做,即使我正在使用并且在我的测试应用程序中工作的纸质组件也不需要使用 Observable mixin。所以我想知道:我做错了什么?创建聚合物 Dart 组件库的“正确”方法是什么?

为了完整起见,这里是主要应用程序组件的代码(使用 Observable mixin 的工作版本):

import 'package:polymer/polymer.dart';
import 'package:core_elements/core_scaffold.dart';
import 'package:core_elements/core_item.dart';

@CustomTag('my-main-app')
class MyMainApp extends PolymerElement with Observable /* <- THIS SHOUDN'T BE NECESSARY! */ {

@observable CoreItem mainMenuItem;

@observable int toggled=0;

CoreScaffold scaffold;

MyMainApp.created() : super.created() {
}

@override
void attached() {
super.attached();
scaffold = $['mainScaffold'];


}

void toggleDrawer() {
toggled = 1 - toggled;
scaffold.togglePanel();
// THIS SHOULD NOT BE NECESSARY!!!!!
deliverChanges();
}
}

@edit:为完整性添加“index.html”源:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TestAPp</title>

<!-- include the web_components polyfills with support for Dart. -->
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Poylmer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>

<!-- import the click-counter -->
<link rel="import" href="launcher.html">

<link rel="stylesheet" href="testapp.css">
</head>
<body>
<my-launcher></my-launcher>
<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

我正在使用最新的 Polymer 版本(0.13.x),编译为 JS。
@edit:修正了一个错字。

最佳答案

有一个错字。 main_app.html 中的第一个非注释行: <lik rel...应该是 <link rel... .

关于dart - 创建聚合物 Dart 网络组件库的正确方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25761106/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com