什么时候需要在Dart中调用watchers.dispatch（）？

Question

I have a small application I am building that is very similar to the example here . 我有一个正在构建的小应用程序，它与此处的示例非常相似。

I am using Dart SDK version 0.5.9.0_r22879 我正在使用Dart SDK version 0.5.9.0_r22879

The main difference is that I update the results via an AJAX request, and I only make this request when Enter is pressed in my input control. 主要区别在于我通过AJAX请求更新结果，并且仅在输入控件中按Enter时才发出此请求。

In my code, the results list does not render unless I explicitly call watchers.dispatch() , as discussed in the 2nd example here . 在我的代码，结果列表中不会呈现，除非我明确地调用watchers.dispatch()在第二个例子中讨论这里。

Why? 为什么？ It is not clear when I would have to explicitly call watchers.dispatch() , and when it would happen automatically, as in the template example. 尚不清楚何时必须显式调用watchers.dispatch()以及何时自动发生，如模板示例中所示。

My HTML: 我的HTML：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <link rel="stylesheet" href="myapp.css">
  </head>
  <body>
    <h1>My App</h1>

    <div id="seach-box-container">
      <input type="text" name="search-box" id="search-box" placeholder="Search" bind-value="searchText" />
    </div>

    <div id="results-container">
      <template instantiate="if noMatches"><span>No matches</span></template>
      <template instantiate="if !noMatches"><span>{{results.length}} entries:</span></template>
      <div id="app-entries">
        <ul>
          <template iterate='entry in results'>
            <li><pre>{{entry.message}}</pre></li>
          </template>
        </ul>
      </div>
    </div>

    <script type="application/dart" src="myapp.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

The important parts of myapp.dart: myapp.dart的重要部分：

import 'dart:html';
import 'dart:json' as JSON;
import 'dart:uri' as uri;
import 'package:web_ui/web_ui.dart';
import 'package:web_ui/watcher.dart' as watchers;

String searchText = '';
List<LogEntry> results = [];

bool get noMatches => results.isEmpty;

void main() {
  query("#search-box").onKeyPress.listen((e) => handleKeyPress(e));
}

void handleKeyPress(KeyboardEvent e) {
  if (!e.ctrlKey && e.keyCode == KeyCode.ENTER) {
    doSearch();
  }
}

void doSearch() {
  if (searchText != '') {
    makeRequest();
  }
}


void makeRequest() {
  HttpRequest.getString( 'http://url.to/rest-api?q=$searchText' )
    .then(processString)
    .catchError(handleError)
    ;
}

processString(String jsonString) {
  List<Map> logs = JSON.parse(jsonString);

  results.clear();
  results.addAll( logs.map((l) => new AppEntry.fromJson(l)) );
  watchers.dispatch();
}

handleError(Error error) {
  print('Request failed');
  print(error);
}

class AppEntry {
  final String message;
  AppEntry.fromJson(Map json) : message = json['message'];
}

Answer 1

You need to call watchers.dispatch() explicitly whenever you need to change the model in a way which is not triggered by events fired by the templates. 每当需要以不被模板触发的事件触发的方式更改模型时，就需要显式调用watchers.dispatch() 。 This means AJAX calls like in your example, timers, etc. 这意味着像您的示例中的AJAX调用，计时器等。

Events installed by templates take care of calling dispatch() for you, so you don't have to do it in that case. 模板安装的事件将为您调用dispatch() ，因此在这种情况下您不必这样做。

You can find more about this here . 您可以在这里找到更多关于此的信息。

However, at the moment, watchers.dispatch is treated as 'old way', as one of the goals in Web-UI is to make binding more declarative with observables. 但是，目前， watchers.dispatch被视为“旧方法”，因为Web-UI的目标之一是使可观察对象的绑定更具声明性。 So the future-proof solution would be to use @observable annotation on your model. 因此，面向未来的解决方案是在模型上使用@observable批注。 This will ensure that observers are updated every time the model changes, without needing you to explicitly update them. 这将确保每次模型更改时都更新观察者，而无需您显式更新它们。

什么时候需要在Dart中调用watchers.dispatch（）？

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-05-27 08:05:27

什么时候需要在Dart中调用watchers.dispatch（）？

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-05-27 08:05:27

解决方案1
4 已采纳 2013-05-27 08:05:27