个人中心
gpt4 book ai didi

dart - web-ui 2路数据绑定(bind)

转载 作者：行者123 更新时间：2023-12-03 02:54:24 24 4
gpt4 key购买 nike

我是 Dart 新手。

我正在尝试构建 web-ui example在赛斯拉德的博客上。我创建了一个新应用程序。

我的 html 看起来像这样:

<!DOCTYPE html>
<html> 

  <head> 
    <meta charset="utf-8"> 
    <title>Proefje</title> 
    <link rel="stylesheet" href="Proefje.css"> 
  </head> 

  <body> 

    <h1>Hello MDV</h1> 
    <p>MDV is {{superlative}}</p> 
    <button id="change-it" on-click="changeIt()">Change</button> 

    <script type="application/dart" src="Proefje.dart"></script> 
    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> 
  </body> 
</html>

像这样的 Dart 代码: 

import 'dart:math';
import 'dart:html'; 
import 'package:web_ui/web_ui.dart'; // not sure about this line

String superlative; 
List<String> alternatives = const ['wicked cool', 'sweet', 'fantastic']; 
Random random; 

main() { 
  superlative = 'awesome'; 
  random = new Random(); 
  query('#change-it').text = 'Do Change'; 
} 

changeIt() => superlative = alternatives[random.nextInt(alternatives.length)];

还有我的 pubspec.yaml 

name:  Proefje
description:  A sample application 

dependencies:   
  web_ui: any

当我运行应用程序时，我看到查询函数更改了按钮中的文本，但是 MDV is {{superlative}}保持原样。

有任何想法吗？

最佳答案

您需要按照 Seth Ladd 博客的设置部分中的说明编译您的 html。

If you're new to Dart Web Components, you might want to read my Your First Web Component with Dart post, or the Dart Web Components article. Just like Dart Web Components, for MDV to work you need to get the web_components package, which contains the dwc compiler. The compiler is what converts the MVC and WC code into vanilla Dart and HTML.



基本上你可以添加一个 build.dart在您的根目录中，类似以下内容: 

import 'package:web_ui/component_build.dart';
import 'dart:io';

void main() {
  build(new Options().arguments, ['web/App.html']);
}

(见 Tools for Web UI)

关于dart - web-ui 2路数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13827771/

24 4 0
文章推荐： dart:调试 dart 客户端和现有 rest api 的客户端/服务器通信？
文章推荐： excel - 分配快捷键并隐藏宏
文章推荐： crash - nsight EE 和 nvvp 在 Ubuntu 16.10 上启动期间均崩溃
文章推荐： dart - Dart 中的类是什么类型？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com