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

Question

我从Polymer,2.0开始,我有一个设计问题,我找不到答案,我希望你能帮助我.

关键是我正在使用一个任务管理器系统,该系统使用外部api(在这种情况下为laravel)来启动/停止任务,编辑或创建新任务等.

我无法找到的是处理业务特定逻辑的最佳方法,因为据我所知,Polymer Elements应该是可重用的,包括api调用和其他功能在Polymer Element中似乎不是最好的解决方案,虽然它是最简单的.

我有几种选择:

• 使用来自顶级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等实时数据库获得的功能)=>请参阅https://www.webcomponents.org/element/firebase/polymerfire /火力查询

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

2)使用标签来读取(和修改)数据

可能最好的方法是为您需要的东西创建数据提供程序,例如

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

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

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

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

我个人喜欢完全封装我的数据,所以我不必考虑它.例如,数据的来源和位置我不在乎:p

数据源示例:

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

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

但请记住,它增加了一个你必须考虑的"额外"层.

我什么时候应该使用Redux？

一般情况下,当您有合理数量的数据随时间变化时使用Redux,您需要一个单一的事实来源,并且您发现将所有内容保持在顶级React组件状态的方法已经不够了.

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

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