Question

所以我有一个纯粹的聚合物应用程序。目前，在某些元素中，我有调用Firebase数据库的方法，并处理相关的处理和诸如此类的处理，然后<template repeat=...>进入我的元素。这似乎不对，因为它鼓励聚合物元素可重复使用。我也做依赖注入等事情，例如<my-element app="{{app}}">所以我可以访问全局设置等。

我最终得到的结构如下：

index.dart -> <my-app-as-an-element app=... -> <child-elements app=...

有没有更好的方法来构建事物？比如，业务逻辑应该发生在lib / src / some_controller.dart中，它导入到index.dart并具有业务逻辑方法吗？我如何将其传递给需要访问这些方法的子元素？基本上，一些最佳实践和方法会有所帮助。

代码：http://github.com/davenotik/dart-stack/tree/dev

Answer 1

我使用的Model类以反映GUI结构的方式构造，并将它们绑定到Polymer元素，如下所示。与控制器类似，但这与SO答案不成比例。

我没有测试过这段代码 - 这只是为了证明这个想法。

import 'package:polymer/polymer.dart';

class AppModel {
  var loginModel = new LoginModel();
  var moviesModel = new MoviesModel();
  var actorsModel = new ActorsModel();
}

class LoginModel extends Observable {
  @observable bool isAuthenticated;
  @observable String userName;
  @observable String email;
}

class MoviesModel {
  final List<MovieModel> movies = toObservable(<MovieModel>[]);
}

class MovieModel extends Observable {
  @observable String id;
  @observable String name;
  @observable int rating;
  final List<ActorModel> actors = toObservable(<ActorModel>[]);
}

class ActorsModel {
  final List<ActorModel> actors = toObservable(<ActorModel>[]);
}

class ActorModel extends Observable {
  @observable String id;
  @observable String firstName;
  @observable String middleName;
  @observable String lastName;
  @observable DateTime birthDate;
  final List<MovieModel> movies = toObservable(<MovieModel>[]);
}

<polymer-element name="login-dropdown">
  <template>
    <template if="model.isAuthenticated">
      <label for="userName"><input id="userName" value="{{model.userName}}" disabled></label>
      <label for="email"><input id="email" value="{{model.email}}" disabled></label>
      <button on-click="{{handleSignOut}}">Sign out</button>
    </template>
    <template if="!model.isAuthenticated">
      <label for="userName"><input id="userName" value="{{model.userName}}"></label>
      <button on-click="{{handleSignIn}}">Sign out</button>
    </template>
  </template>
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    import 'model.dart';
    @CustomTag('login-dropdown')
    class LoginDropdown extends PolymerElement {
      LoginDropdown.created() : super.created();

      @PublishedProperty(reflect: true) MoviesModel model;
    }
  </script>
</polymer-element>

<polymer-element name="app-element">
  <template>
    <header-toolbar>
      <login-dropdown-button>
        <login-dropdown model="{{model.loginModel}}"></login-dropdown>
      </login-dropdown-button>
    </header-toolbar>
    <tab-control>

      <tab-panel label="Movies">
        <movies-panel model="{{model.moviesModel}}"></movies-panel>
      </tab-panel>

      <tab-panel label="Actors">
        <actors-panel model="{{model.actorsModel}}"></actors-panel>
      </tab-panel>

    </tab-control>

  </template>
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    import 'model.dart';

    @CustomTag('app-element')
    class AppElement extends PolymerElement {
      AppElement.created() : super.created();

      AppModel model = new AppModel();
    }
  </script>
</polymer-element>

<polymer-element name="movies-panel">
  <template>
    <template repeat="{{movie in model.movies}}">
      <movie-panel model="{{movie}}"></movie-panel>
    </template>
  </template>
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    import 'model.dart';

    @CustomTag('movies-panel')
    class MoviesPanel extends PolymerElement {
      MoviesPanel.created() : super.created();

      @PublishedProperty(reflect: true) MoviesModel model;
    }
  </script>
</polymer-element>

<polymer-element name="movie-panel">
  <template>
    <div data-id="{{model.id}}">
      <div><span>Name:</span><span>{{model.name}}</span></div>
      <div><span>Rating:</span><span>{{model.rating}}</span></div>
    </div>

    <template repeat="{{actor in model.actors}}">
      <actor-panel model="{{actor}}"></actor-panel>
    </template>

  </template>
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    import 'model.dart';

    @CustomTag('movies-panel')
    class MoviesPanel extends PolymerElement {
      MoviesPanel.created() : super.created();

      @PublishedProperty(reflect: true) MoviesModel model;
    }
  </script>
</polymer-element>

<polymer-element name="actors-panel">
  <template>
    <template repeat="{{actor in model.actors}}">
      <actor-panel model="{{actor}}"></actor-panel>
    </template>
  </template>
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    import 'model.dart';

    @CustomTag('actors-panel')
    class ActorsPanel extends PolymerElement {
      ActorsPanel.created() : super.created();

      @PublishedProperty(reflect: true) ActorsModel model;
    }
  </script>
</polymer-element>

<polymer-element name="actor-panel">
  <template>
    <div data-id="{{model.id}}">
      <div><span>First name:</span><span>{{model.firstName}}</span></div>
      <div><span>Middle name:</span><span>{{model.middleName}}</span></div>
      <div><span>Last name:</span><span>{{model.lastName}}</span></div>
      <div><span>Date of birth:</span><span>{{model.birthDate}}</span></div>
    </div>

    <template repeat="{{movie in model.movies}}">
      <movie-panel model="{{movie}}"></movie-panel>
    </template>

  </template>
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    import 'model.dart';

    @CustomTag('actor-panel')
    class ActorPanel extends PolymerElement {
      ActorPanel.created() : super.created();

      @PublishedProperty(reflect: true) ActorModel model;
    }
  </script>
</polymer-element>

另请参阅Use a class as attribute for a dart polymer element了解更多有趣的选项。

在Polymer应用程序中处理业务逻辑的最佳位置是什么？

1 个答案: