CODEWITHSUNDEEP
dart
Seth Ladd
Seth Ladd

Reputation: 120439

How do I dynamically load HTML and insert into my web page with Dart?

How do I dynamically load a snippet of HTML and insert it into my web page? I am using Dart.

Upvotes: 13

Views: 5173

Answers (3)

mezoni
mezoni

Reputation: 11220

You can try this example.

https://jsfiddle.net/kofwe39d/ (JS compiled from Dart source code.)

web/main.dart

import 'dart:async';
import 'dart:html';

import 'package:virtual_dom/components/component.dart';
import 'package:virtual_dom/features/state.dart';
import 'package:virtual_dom/helpers/h.dart';
import 'package:virtual_dom/helpers/mount.dart';
import 'package:virtual_dom/helpers/styles.dart';
import 'package:virtual_dom/helpers/vhtml.dart';

void main() {
  final app = document.getElementById('app')!;
  mount(app, _App());
}

class _App extends Component {
  @override
  Object render() {
    final timer = State.get('timer', () => 3);
    final setTimer = State.set<int>('timer');
    if (timer > 0) {
      Timer(Duration(seconds: 1), () {
        setTimer(timer - 1);
      });
    }

    final html = timer > 0
        ? ''
        : '''
Hello, <strong>World!</strong>
''';

    final style = styles({'padding': '6px'});
    return h('div', {
      'style': style
    }, [
      if (timer > 0) '$timer sec',
      h('p', 'Your html:'),
      vHtml('div', html),
    ]);
  }
}

web/index.html

<!DOCTYPE html>

<html style="height: 100%;">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example application</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  <script defer src="main.dart.js"></script>
</head>

<body style="height: 100%; font-family: Verdana,sans-serif; font-size:15px; line-height:1.5">
  <div id="app" style="height: 100%;"></div>
</body>

</html>

Upvotes: 0

Kasper
Kasper

Reputation: 13572

main.dart:

import 'dart:html';

DivElement div = querySelector('div');

main() async {
  String template = await HttpRequest.getString("template.html");
  div.setInnerHtml(template, treeSanitizer: NodeTreeSanitizer.trusted);
}

template.html:

<h1>Hello world.</h1>

Check my bird... <em>it flies</em> !
<img src="https://www.dartlang.org/logos/dart-bird.svg">

For the full example, that runs out of the box, see:

https://gist.github.com/kasperpeulen/536b021ac1cf397d4e6d

Note that you need 1.12 to get NodeTreeSanitizer.trusted working.

Upvotes: 3

Seth Ladd
Seth Ladd

Reputation: 120439

Glad you asked! Using Dart for this task isn't much different than JavaScript, except you get typing, code completion, and a slick editing experience.

First, create the snippet.html:

<p>This is the snippet</p>

Next, create the application. Notice the use of XMLHttpRequest to request the snippet. Also, use new Element.html(string) to create a block of HTML from a string.

import 'dart:html';

void main() {
  var div = querySelector('#insert-here');
  HttpRequest.getString("snippet.html").then((resp) {
    div.append(new Element.html(resp));
  });
}

Finally, here's the host HTML page:

<!DOCTYPE html>

<html>
  <head>
    <title>dynamicdiv</title>
  </head>
  <body>
    <h1>dynamicdiv</h1>
    <div id="insert-here"></div>
    <script type="application/dart" src="dynamicdiv.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Upvotes: 15

Related Questions