javascript - polymer 中的 MV*，作为 polymer 元素的模型和服务？

Question

例如，假设我想要两个 View ( polymer 元素)共享一个模型。

在 Angular 中，模型将存在于注入(inject)到 View 中的单例服务中，两个 View 都从同一源读取。

我尝试用 Polymer 模拟这种方法，所以我可以做类似的事情:

<polymer-element name="view1">
  <template>
    <my-model></my-model>
    ...
  </template>
  ...
</polymer-element>

<polymer-element name="view2">
  <template>
    <my-model></my-model>
    ...
  </template>
  ...
</polymer-element>

我喜欢这种方法，因为它是一种定义依赖关系的声明方式，而且它的工作原理与 <core-ajax> 基本相同。和其他“开箱即用”的 polymer 元素。

用这种方式我需要等待 domReady在我可以与模板中声明的任何元素交互之前进行生命周期回调，所以这就是我在这一刻保留我的初始化逻辑的地方。问题是这个回调会为每个 <my-model> 调用一次。声明的元素(所以 <my-model> 在这个例子中会被初始化两次，因为它同时出现在 <view1> 和 <view2> 中)。为了确保我的模型遵循单例模式，我必须将状态移到元素实例之外，如下所示:

 <polymer-element name="my-model">
   <script>
    (function(){
      // private shared state
      var instances = [], registered; // pattern variables
      var foo; // state, model, whatever

      // element init logic
      Polymer('my-model', {
        // Polymer callbacks
        domReady: function(){
          if (registered === (registered=true)) return;
          // singleton init logic
          foo = 'something';
          // event handlers
          this.addEventListener('foo', function(){ foo += 'baz'; });
        },
        attached: function() { instances.push(this); },
        detached: function(){
          instances = instances.filter(function(instance){
            return instance !== this;
          }.bind(this));
        },
        // element API
        update: doSomething,
        get state() { return foo; }
      });
      // private functions
      function doSomething(){ foo += 'bar' }
    })();
  </script>
</polymer-element>

所以它有效，但对我来说它看起来不对。正在使用 <polymer-element>通常与单例模式不兼容？我应该从 Polymer 转移到模型和服务上吗？ Polymer 核心元素是如何逃脱惩罚的？

[编辑] 我在上面的初始化代码中添加了一些事件监听器。它们只在一个实例中注册，以避免监听器在多个实例中多次触发。如果声明事件处理程序的实例被删除，会发生什么情况？这不会破坏异步逻辑吗？

Answer 1

我会这样:
在主页上定义您的模型并从您的 View 中调用它。

如果它被移除，你可以:
1 - 监听“分离的”生命周期回调并在其中强制注册它或
2 - 将内容存储在更高级别对象中的原型(prototype)构建中，并以您最喜欢的方式访问它。
3 - 如果一切都失败了，(我不确定是否会，但我想是这样，因为我还没有使用这种实现，截至目前我与 php 交谈并传递我需要持久化的对象)你可以使用“prepareForRemoval”，知道您将离开实例、本地存储您的东西并执行第 1 步，然后“recoverFromRemoval”如果您知道我所说的驼峰外壳原型(prototype)建议的意思。

反正我不是很喜欢单例。 Polymer 是一种强大的前端工具，但我不确定它是否是实现它的最佳方式。

在 API 文档中，他们没有提到将其切断的可能性 (as you can see) 但老实说，我认为你是对的，你会失去你的东西。
这只是我的 2 美分 实际上只是我此时想出的一个不优雅的解决方案，也许@ebidel、@DocDude 或@dodson 可以帮助我们解决这个问题，但你不能在这里标记它们所以我会在 G+ 上为我们标记他们，你先生让我很感兴趣。
顺便说一句，你为什么要离开你的主页？在 polymer 中没有意义，您应该动态更改内容而不是摆脱它。什么是使用场景？

ps.: 抱歉，我讨厌大写专有名词。克服它

编辑(不适合评论):

我表达错了。不管怎样，我强烈认为我不明白你想要什么。
好吧，如果我这次做对了，是的，它会触发多次(它们应该会触发)，但是一旦某个特定 View 被删除，它就不应该切断其他 View 。

至于您的初始化逻辑，我将着手向窗口或文档(我认为窗口更可取)本身添加一个监听器，等待“polymer 就绪”事件。

"To make sure that my model follows the singleton pattern I have to move state outside of the element instance"

是的，没错。但不要等待其原型(prototype)中的 domready，而是使用构造或类似构造并将其称为上述事件监听器的回调。当我回到家时，我会编辑我的答案以使其更清楚(如果不是，请告诉我)。
我希望你明白我的意思。

如果你不这样做，我会很快回来。