使用Dart渲染页面

时间:2014-06-09 13:48:07

标签: dart routes

我正在学习Dart,并且我正在尝试显示将用户数据发送到另一个页面的表单。我正在使用"路线"包。这是我的代码" bin":

import 'urls.dart';
import 'package:route/server.dart';
import 'package:route/pattern.dart';
import 'dart:io';

main() {
  HttpServer.bind('127.0.0.1', 8000).then((server) {
    var router = new Router(server)
      ..serve(homeUrl).listen(serverHome)
      ..serve(validateUrl, method: 'POST').listen(serverValidate)
      ..defaultStream.listen(serverNotFound);
  });
}

serverHome(req) {
  print("Server side");
}

serverValidate(req) {

}

serverNotFound(req) {

}

这就是我所拥有的" web":

library client;
import 'dart:html';
import 'package:route/client.dart';
import 'urls.dart';
void main() {
  /*
  querySelector("#sample_text_id")
      ..text = "Click me!"
      ..onClick.listen(reverseText);
      */ 
/*  var router = new Router()
    ..addHandler(homeUrl, showForm)
    ..addHandler(validateUrl, validateForm)
    ..listen();
    */ 
}

void showForm(String path) {
  print("Showing form");
  querySelector("#sample_text_id")
        ..text = "Click me!"
        ..onClick.listen(reverseText);
}

void validateForm(String path) {
  print("Validate");
}
void reverseText(MouseEvent event) {
  var text = querySelector("#sample_text_id").text;
  var buffer = new StringBuffer();
  for (int i = text.length - 1; i >= 0; i--) {
    buffer.write(text[i]);
  }
  querySelector("#sample_text_id").text = buffer.toString();
}

如何显示我的表单(experiment3.html)和验证页面(validate.html),以及访问验证页面中的表单输入?

1 个答案:

答案 0 :(得分:0)

您可以在页面中添加HTML,例如

String myForm = new DocumentFragment.html('''
  <form id='myForm'>
    <input type='text' ....
    ....
    <input type='submit'>
  <form/>''')

querySelector('#form_parent')
    ..children.clear()
    ..add(myForm);

querySelector('#myForm').onSubmit.listen((e) {
  // handle form input (validation)
  // send data
});

我还没有使用路由器,也无法帮助你。 稍后您可以以相同的方式添加另一个视图,因为children.clear()会在添加新HTML之前删除所有子项。