最好在我的Polymer應用程序中處理業務邏輯在哪裏？

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

我使用其在反映GUI結構的方式來構造模型類和我將它們綁定到所述聚合物元件等如下所示。 與控制器類似，但這會對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更多有趣的選項。