绑定到Polymer中的全局变量 [英] Binding to global variables in Polymer

问题描述

我对Polymer刚起步，只研究了数据绑定的工作原理。我正在移植现有的Dojo应用程序，其中将是：

I am fairly new to Polymer, and only just studied how data binding works. I am porting an existing Dojo application, where there would be:

1）每个URL都有一个商店（保存数据）

1) A single store (holding data) for each URL

2）更新商店元素时来自服务器的消息

2) A message from the server when a store element was updated

因此，依赖于商店中数据的动态选择框将如果用户在应用程序中的任何地方自动添加了一个额外的项目，则用户将一个项目添加到商店（用于保存数据）

As a result, a dynamically made select box which depended on data in the store would automagically have an extra item if anywhere in the application a user added an item to the store (which held the data)

我正在尝试在Polymer中复制类似的内容。

I am trying to replicate something like this in Polymer.

用例：想象一个像这样的URL： / app / categories 。通过使用HTTP GET查询它，您最终得到所有可用类别的JSON。当应用程序运行时，服务器可能会通知/ app / categories中的新元素。结果，应用程序中的所有选择都将自动具有多余的项。

Use case: imagine an URL like this: /app/categories. By querying it with an HTTP GET, you end up with a JSON of all the categories available. While the app is running, the server might notify of a new element in /app/categories. as a result, all of the selects in the application would then have the extra item automagically.

在Polymer中，我学习了如何在当前绑定属性元素到包含元素中的属性 。我了解在触发正确的事件等情况下这是如何发生的。因此，想法是创建一个选择，其中由 dom-repeat 生成项目。绑定到...某种程度上的全局变量（？）。

In Polymer, I learned how to bind a property in the current element to a property in a contained element. I understand how this happens with the right events being fired etc. So, the idea would be to create a select where the items are generated by a dom-repeat, which would be bound to... a somehow global variable (?).

但是...甚至可能将包含的元素的属性绑定到全局变量

But... is it even possible to bind the property of a contained element to a "global" variable, rather than a property of the containing element?

或者，更广泛地说，是否存在一种模式（甚至是既定模式）来确保全局变量为更改（由于彗星消息或其他原因），一束绑定到它的元素将被通知并因此发生更改（在这种情况下，使用dom-repeat的 select显示项目！）

OR, more broadly, is there a pattern (or even an established pattern) to make sure that when a global variable is changed (thanks to a comet message, or whatever), a bunch of elements binding to it will be notified and therefore changed (in this case, the "select" using dom-repeat to show the items!)

这是一个 JSBin，它显示了如何通过<$创建菜单c $ c> iron-ajax 在这一点上，JSBin缺少的是模拟有关数据更改的服务器推送，以及一种实现所有功能的方法菜单同时更新。

Here is a JSBin that shows how to create a menu via iron-ajax At this point what's missing to the JSBin is the simulation of a server push about a data change, as well as a way to have all of the menus update at the same time.

推荐答案

恕我直言，最合理和可维护的模式是一种数据流方法（某种方式遵循通量或 Redux （有点简单）。

IMHO the most sane and maintainable pattern is a one way data flow approach (something along the lines of Flux or Redux (which is a bit simpler).

有一个作为图结构存在的全局状态对象，数据沿组件树（从根组件开始）向下流动。

每个组件都具有定义明确的输入属性，并从父组件接收数据（使用数据绑定），并将部分数据传递给它的子组件。当组件更改状态时，它会触发一个事件，该事件将组件树冒泡到您的根组件，然后可以更新您的全局状态对象（该对象又向下流到您的组件树），与后端通信等。

There is one global state object that exists as as a graph structure and the data flows down your component tree (starting with the root component).
Each component has well defined input properties and receives data from the parent component (using data-binding) and passes on parts of the data to its children. When a component changes state, it fires an event which bubbles up the component tree up to your root component that can then update your global state object (which again flows down your component tree), communicate with the backend, etc.

我还可以推荐视频来自Polymer 2015峰会，它解释了一种类似的方法（中介模式）。

I can also recommend this video from the Polymer 2015 summit, which explains a similar approach (mediator pattern).

这篇关于绑定到Polymer中的全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！