Polymer 2.0：我应该在哪里放置业务逻辑？

Question

我从Polymer，2.0开始，我有一个设计问题，我无法找到答案，我希望你能帮助我。

重点是我正在使用一个任务管理器系统，该系统使用外部api（在这种情况下为laravel）来启动/停止任务，编辑或创建新任务等等。

我无法找到的是处理业务特定逻辑的最佳方法，因为据我所知，Polymer Elements应该是可重用的，并且在聚合物元素中包含api调用和其他功能似乎不会是最好的解决方案，尽管它是最简单的。

我有几种选择：

• 使用来自顶级JS类的自定义事件管理所有内容，这些事件发出api调用并更新Polymer Elements。
• 使用mixins从Polymer Element扩展，并使用包含所需方法/逻辑的自定义Task类。
• 将一个Task对象传递给Polymer Element并将其保存为属性并通过它调用该方法。

有谁能告诉我哪种方法最好？虽然我确信这不会是我所说的三个中的任何一个：）

谢谢！

Answer 1

有几个approches

1）使用标签读取和修改数据（实时数据库）

// firebase example
<firebase-query
    id="query"
    app-name="notes"
    path="/notes/[[uid]]"
    data="{{data}}">
</firebase-query>

<template is="dom-repeat" items="{{data}}" as="note">
  <sticky-note note-data="{{note}}"></sticky-note>
</template>

使用此功能，您可以访问{{data}}并进行修改。因此，如果您删除了一个笔记，它将在服务器和其他所有连接的客户端上自动删除（您使用像firebase这样的实时数据库获得的功能） =＆GT;见https://www.webcomponents.org/element/firebase/polymerfire/firebase-query

据我所知，你将使用php为数据创建api吗？所以现实数据库是不可能的。所以

2）使用标签来阅读（和修改）数据

可能最好的方法是为您需要的东西创建数据提供程序 e.g。

<data-notes notes="{{notes}}"></notes>
<data-comments comments="{{comments}}" for="[[currentNote]]"></notes>

因此，您仍然可以轻松访问{{notes}}和{{comments}}。

如何处理更新取决于您的用例。例如，您可以在数据处理程序中使用changeEvents通过fetch或iron-ajax动态执行api更新。

或者您可以使用表单执行“正常”发布请求，并触发数据提供程序获取新数据。

我个人想完全封装我的数据，所以我不必考虑它。例如。数据的来源和位置我不在乎：p

数据来源示例：

• static：组件内部的json =＆GT; https://github.com/Polymer/shop/blob/2.0-preview/src/shop-category-data.html
• 子元素：例如，使用iron-ajax实际加载来自json api的数据
• fetch：使用fetch加载数据，处理数据并存储以供使用
• 浏览器存储：使用html5 localStorage或indexedDB（对于临时数据可能？）=＆gt; https://github.com/Polymer/shop/blob/2.0-preview/src/shop-cart-data.html
• ...

3）使用类似Redux的东西（用于大量动态数据）

但请记住，它会添加一个你必须考虑的“额外”图层。

我什么时候应该使用Redux？

  

通常，在有合理数据量时使用Redux   随着时间的推移，你需要一个单一的事实来源，你会发现   这类似于将所有内容保存在顶级React中   组件的状态不再足够。

更多=＆gt; http://redux.js.org/docs/faq/General.html#general-when-to-use

Polymer的一个简单示例： https://tur-nr.github.io/polymer-redux/