标签: dart-webui

我将构建具有许多不同视图的复杂应用程序.想象一下例如eshop解决方案.可以有很多不同的观点:

• 联系页面包含一些静态信息
• 新客户的登记表
• 查看您的订单
• 产品清单
• 有关产品的详细信息
• ...

现在我有点困惑,如何使用Web UI构建这样一个复杂的应用程序.我希望将视图的HTML模板分隔成多个文件,并具有一些逻辑来确定应该呈现哪一个.

假设我想要一个包含标题和页脚等基本内容的主模板,那么我有很多内容模板,这些模板应该被注入到主模板内的正确位置.

到目前为止,我一直只看到使用Dart Web UI的小型单模板示例,所以我不知道如何实现这一点.

在Dart的Web UI中,可以传递任意数据以响应事件,例如,以下代码段将值传递2给increment(int incBy)方法以响应按钮的点击事件:

<!-- Web UI -->
<element name="x-click-counter">
  <template>
    <button on-click="increment(2)">  <!-- passing a value of 2 -->
      Click me
    </button>   
  </template>
</element>
<script>
  import 'package:web_ui/web_ui.dart';

  class CounterComponent extends WebComponent {
    void increment(int incBy) {        // accept the value of 2
      count = count + incBy;
    }
  }
</script>

在Polymer(和Polymer.dart)中,on-click事件属性需要函数名的字符串版本,而不是实际的函数调用.这在聚合物文档页面上描述为:

事件处理程序属性的值是组件上方法的字符串名称.与传统语法不同,您不能将可执行代码放在属性中.

使用polymer.dart,它看起来像:

<polymer-element name="x-click-counter">
  <template>
    <button on-click="increment">  <!-- can't pass a value of 2, as you need to pass a string -->
      Click …

假设我有两个飞镖项目

项目A包含使用Web组件创建一组UI小部件的代码(类似于https://github.com/kevmoo/widget.dart)

项目B包含我的前端代码,它将重用我在项目A中创建的UI小部件.

如果我不想将项目A发布到pub,那么无论如何都要将项目B链接到项目A而无需手动将项目A中的文件复制到B中？

谢谢

我可以使用Dart代码中的@observable声明使String或num类型可观察:

@observable
var x = '';

和{{ }}html中的语法:

<div>x = {{x}}</div>

但@observable不适用于列表和地图.我如何制作那些可观察的？

我在使用webUI时遇到样式问题.

当我注入我的dataValues时,我的设计被打破了.

在我的具体情况下,我的菜单显示不正确.从我所看到的,它看起来像{{dataValue}}初始字符串长度为0,并且在webUI完成注入之前应用了html和css.

所以现在,当我把我的字符串,它看起来像是错误的长度计算.

在调试时,当我重新编辑css文件时(我不改变宽度:100%我只是重新编辑并保存,因此重新应用了css),然后它看起来很好.

我尝试使用(来自dart文件):

element.style.width =  "100%";
element.classes.add("classWithWidth100Percent");

但这似乎都不起作用.

所以基本上我认为我可以通过重新加载/重新应用CSS来解决这个问题.任何人都知道如何实现这一目标？

编辑:它是什么{{datavalue}}？..输出我的字符串.... < - 什么字符串？..错误的长度...... < - 有什么不妥？如果您在Dart编辑器中"以Javascript身份运行"并且只是从硬盘运行HTML文件 - 它是否有效？CSS样式是否正确显示？在哪个浏览器？

• {{dataValue}}是Darts webUI的表示法.
• 我的字符串是一系列常规字符 - 例如 "Word"
• Dart将{{dataValue}}解释为长度为0的字符串.当我使用webUI"注入"我的字符串时,应用css就好像长度为0.所以现在,我可以看到不应该有的换行符.width = 100%不会重新应用新的字符串长度.
• Javascript或Dartium没什么区别.
• 我正在使用Chromium.

编辑2:

是的,dataValue具有初始价值,仍然打破了设计.

String dataValue = "some text";

这是代码:

<div id='headerContainer'>
    <div id='headerBg' class="displaying_theFlow"></div>
    <header id="header">
        <nav id='menu'>
            <a href="#theFlow">{{theFlow}}</a>
            <a href="#connect">{{connect}}</a>
            <a id="logoLink" href="#welcomeScreen">
                <div id="logoBg"></div>
                <div id="logo" alt="LogoImg">LogoImg</div>
            </a>
            <a href="#business">{{business}}</a>
            <a href="#aboutUs">{{aboutUs}}</a>
        </nav>
    </header>
</div>

在.dart文件我只是为字符串分配值theFlow,connect,business等和呼叫后 …

我有一个像这样的Dart Web UI类:

class PersonComponent extends WebComponent {
  bool loggedIn;
  String name;
}

而我正在使用它:

<x-person loggedIn="{{loggedIn}}"></x-person>

但是,当我运行应用程序时,我得到一个NoSuchMethodError,因为它无法找到 loggedin=

如何在Web UI类中设置camel case属性名称？

我刚刚阅读了关于Dart的web ui框架,但我还没有看到任何控件,例如datagrid或tab bar.是否有任何库提供来自Sencha ExtJs的组件？

我目前正致力于将当前的Dart Web UI项目翻译为Polymer.dart.我们使用Bootstrap 3作为前端样式和许多Web动画(例如下拉菜单,模态,工具提示).

然而,在我将一个Web UI组件转换为Polymer之后,所有Bootstrap JavaScript都停止为子组件工作,因为它现在封装在ShadowDOM中.要从Dart访问ShadowDOM中的元素,我必须使用shadowRoot字段,而从Chrome中的JavaScript我必须使用webkitShadowRoot属性,但我仍然无法让单个下拉菜单正常工作.

首先,在bootstrap中调用下拉列表('toggle')后,会出现下拉菜单,但永远不会消失.此外,由于事件是在窗口级别触发的,因此似乎无法检测click事件触发了哪个链接.这意味着我无法找到要显示的下拉菜单.

有没有人有使用twitter-bootstrap和Polymer的经验？

我的问题是:如何观察像String或num这样的简单变量的变化？我知道你可以很容易地观察这样的物体:

observe(t, (e) => print ("Value changed"));

但如何在简单变量上执行此操作？

我的AngularDart项目中有一个角度组件的App布局.我怎样才能改变drawer从应用程序的布局persistent,以temporary在媒体屏幕的变化？