问问题
1843 次
2 回答
13
试试mustache ,一个mustache 模板的 Dart 实现,一种广泛使用的模板语法,有多种语言的实现。
这是一个例子:
import 'package:mustache/mustache.dart';
main() {
var source = '{{#names}}<div>{{lastname}}, {{firstname}}</div>{{/names}}';
var template = new Template(source);
var output = template.renderString({'names': [
{'firstname': 'Greg', 'lastname': 'Lowe'},
{'firstname': 'Bob', 'lastname': 'Johnson'}
]});
print(output);
}
Dart 团队目前专注于客户端开发,因此核心库中缺少许多基本的服务器端功能。但是看看pub,有许多社区维护的包可用。
另请参阅这个类似的包:mustache4dart。
于 2013-03-26T22:43:56.763 回答
0
你可以试试https://pub.dev/packages/edart。
嵌入式 Dart 模板引擎和编译器。将模板编译为 Dart 源代码。
例子:
products_index.html
<%@ import uri="layout.html.g.dart" %>
<%@ import uri="../models/product.dart" %>
<%@ class extends="View" %>
<%@ render params="List<Product> products, HttpRequest request" %>
<p>
Our cool products list
</p>
<ul class="w3-ul">
<% for (final product in products) { %>
<li><%= product.name %> <%= product.price %></li><%
} %>
</ul>
<%
final layout = layout_html();
layout.title = 'Products';
layout.addTag(HtmlTag('meta', {'description': 'MegaSuperShop cool price list'}));
layout.addBreadcrumb('Products', request.requestedUri.toString());
layout.render(out, request);
%>
该模板将被编译成以下源代码:
products_index.html.g.dart
// ignore: unused_import
import 'dart:convert';
import 'layout.html.g.dart';
import '../models/product.dart';
class products_index_html extends View {
String render(List<Product> products, HttpRequest request) {
final out = StringBuffer();
out.write('<p>\n');
out.write(' Our cool products list\n');
out.write('</p>\n');
out.write('<ul class="w3-ul">\n');
for (final product in products) {
out.write(' <li>');
out.write(htmlEscape.convert('${product.name}'));
out.write(' ');
out.write(htmlEscape.convert('${product.price}'));
out.write('</li>');
}
out.write('</ul>\n');
final layout = layout_html();
layout.title = 'Products';
layout.addTag(
HtmlTag('meta', {'description': 'MegaSuperShop cool price list'}));
layout.addBreadcrumb('Products', request.requestedUri.toString());
layout.render(out, request);
return out.toString();
}
}
布局模板也很简单易懂。
layout.html
<%@ import uri="../html/layout.dart" %>
<%@ import uri="breadcrumbs.html.g.dart" %>
<%@ import uri="footer.html.g.dart" %>
<%@ import uri="header.html.g.dart" %>
<%@ import uri="nav.html.g.dart" %>
<%@ export uri="../html/breadcrumb.dart" %>
<%@ export uri="../html/html_utils.dart" %>
<%@ export uri="../html/view.dart" %>
<%@ class extends="Layout" %>
<%@ render params="StringBuffer body, HttpRequest request, {int statusCode = 400}" %>
<html>
<head>
<title><%= title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<% for (final tag in tags) { %>
<%== tag %>
<% } %>
</head>
<body>
<%== header_html().render(title) %>
<%== nav_html().render(request) %>
<div class="w3-container">
<%== breadcrumbs_html().render(breadcrumbs) %>
</div>
<div class="w3-container">
<%== body %>
</div>
<%== footer_html().render() %>
</body>
</html>
<%
body.clear();
body.write(out);
final response = request.response;
response.headers.add('Content-Type', 'text/html; charset=utf-8');
response.statusCode = statusCode;
response.write(out);
%>
最后是 class 的源代码Layout
。
它可以是任何东西,也可能根本不是(这不是很方便)。
import 'breadcrumb.dart';
import 'html_utils.dart';
export 'dart:io';
export '../site/site_links.dart';
export 'html_utils.dart';
class Layout {
final breadcrumbs = <Breadcrumb>[];
final tags = <HtmlTag>[];
String title = '';
void addBreadcrumb(String text, String url) {
final item = Breadcrumb(text: text, url: url);
breadcrumbs.add(item);
}
HtmlTag addTag(HtmlTag tag) {
tags.add(tag);
return tag;
}
}
于 2020-10-18T15:44:25.957 回答