javascript - Polymer:dom-repeat 就像元素的局部变量-6ren

javascript - Polymer:dom-repeat 就像元素的局部变量

转载作者：行者123 更新时间：2023-11-30 15:26:40

我想创建一个控件，将数据转换成我需要的东西。

目前，我用一个全局变量来解决这个问题。代码看起来像这样:(小写功能只是为了简单地演示它。通常我想将它用于对象数组。例如，获取某些名称和 ID 的不同值)

<dom-module id="my-tolower">
  <script>
    "use strict";
    Polymer({
      is: 'my-tolower',
      properties: {
        input: {
          type: String,
          value: "",
        },
        output:{
          type: String,
          value: "",
          notify: true,
        }
      },
      observers:[
        "_inputChanged(input)",
      ],
      _inputChanged: function(newInput, oldInput){
        this.set("output", newInput.toLowerCase());
      }
    });
  </script>
</dom-module>

用法:

<my-tolower input="[[output.name]]" output="{{lower}}">[[lower]]</my-tolower>

如果我只使用变量 lower，这个解决方案效果很好只有一次。在 <dom-repeat> 里面，我遇到了问题。

我怎样才能轻松地创建一个只在 my-tolower 内部可用的自定义变量？？与 Polymer 的 dom-repeat 完全一样是吗？

我查看了 Polymer's <dom-repeat> sources 的代码，但我不知道它是如何工作的。这在自定义元素中甚至可能吗？我需要创建自定义模板吗？

为了更好地解释我的问题，我添加了一个更大的示例来详细解释我的问题。

HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-app',
    ready: function(){
      //In my real Problem this value comes from a websocket...
      this.devices = [{
        name: "PC 1",
        components: [
          {
            name: "HDD1",
            processors: [
              {
                type: "Processor1",
                usage: "Dont Know 1"
              },
              { type: "Processor1", usage: "DontKnow2"},
              { type: "Processor2", usage: "DontKnow3"}
            ]
          },
          {
            name: "Another Piece Of Hardware",
            processors: [
              {
                type: "Processor4",
                usage: "Dont Know 1"
              },
              { type: "Processor3", usage: "DontKnow2"},
              { type: "Processor4", usage: "DontKnow3"}
            ]
          }
        ]
      },
      {
        name: "PC 2",
        components: [
          {
            name: "My third piece of hardware",
            processors: [
              {
                type: "Processor1",
                usage: "Dont Know 1"
              },
              { type: "Processor2", usage: "DontKnow2"},
              { type: "Processor3", usage: "DontKnow3"}
            ]
          }
        ]
      }];
      //this.devices must not be changed!
    }
  });
  
  
  Polymer({
    is: 'my-distinct',
    properties: {
      inputs: {
        type: String
      },
      outputs:{
        computed: '_getDistincts(inputs, path)',
        notify: true
      },
      path: {
        type: String,
        value: ""
      }
    },
    _getDistincts(inputs, path){
      let result = [];
      
      for(let key in inputs){
        if(inputs.hasOwnProperty(key)){
          let x = inputs[key];
          if(path && path != ""){
            x = x[path];
          }
          
          if(result.indexOf(x) < 0){
            result.push(x);
          }
          else{
            //Already Exists
          }
        }
      }
      
      return result;
    }
    
  });
  
 
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <my-app></my-app>
  As you can see, there is always "Processor1", "Processor2" and "Pocessor3" available although this is only the result of the last computers component. You can see the right result (but with duplicates) if you use the comment I made instead.
  
  <dom-module id="my-app">
    <template>
      <ul>
        <template is="dom-repeat" items="[[devices]]" as="device">
          <li>[[device.name]]
          <ul>
            <template is="dom-repeat" items="[[device.components]]" as="component">
              <li>[[component.name]]
                <ul>
                  <!-- This is my code with using distinct -->
                  <my-distinct inputs="[[component.processors]]" 
                      outputs="{{distinctProcessorNames}}" 
                      path="type">
                    <template is="dom-repeat" items="[[distinctProcessorNames]]" as="processorName">
                      <li>[[processorName]]
                        <!-- Here I could iterate over all processors (filtered) and list their usages-->
                      </li>
                    </template>
                  </my-distinct>
                  
                  <!-- This is my code without using distinct. -->
                  <!--template is="dom-repeat" items="[[component.processors]]" as="processor">
                    <li>[[processor.type]]
                      <ul>
                        <li>Used for [[processor.usage]]</li>
                      </ul>
                    </li>
                  </template-->
                </ul>
              </li>
            </template>
          </ul>
          </li>
        </template>
      </ul>
    </template>
  </dom-module>
</body>

Demo

最佳答案

您正在使用 2 个不同的 Polymer 自定义元素 <my-app>和 <my-distinct> .因此，您应该使用适当的 <dom-module> 声明第二个。声明:

<dom-module id="my-distinct">
    <template>
        <template is="dom-repeat" items="[[outputs]]" as="processorName">
            <li>[[processorName]]
        </template>
    </template>
</dom-module>

然后使用您的计算属性(基于属性值)outputs作为 items <template is="dom-repeat"> 的值.

下面的演示:

HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-app',
    ready: function(){
      //In my real Problem this value comes from a websocket...
      this.devices = [{
        name: "PC 1",
        components: [
          {
            name: "HDD1",
            processors: [
              {
                type: "Processor1",
                usage: "Dont Know 1"
              },
              { type: "Processor1", usage: "DontKnow2"},
              { type: "Processor2", usage: "DontKnow3"}
            ]
          },
          {
            name: "Another Piece Of Hardware",
            processors: [
              {
                type: "Processor4",
                usage: "Dont Know 1"
              },
              { type: "Processor3", usage: "DontKnow2"},
              { type: "Processor4", usage: "DontKnow3"}
            ]
          }
        ]
      },
      {
        name: "PC 2",
        components: [
          {
            name: "My third piece of hardware",
            processors: [
              {
                type: "Processor1",
                usage: "Dont Know 1"
              },
              { type: "Processor2", usage: "DontKnow2"},
              { type: "Processor3", usage: "DontKnow3"}
            ]
          }
        ]
      }];
      //this.devices must not be changed!
    }
  });
  
  Polymer({
    is: 'my-distinct',
    properties: {
      inputs: {
        type: String
      },
      outputs:{
        computed: '_getDistincts(inputs, path)', notify: true
      },
      path: {
        type: String,
        value: ""
      }
    },
    _getDistincts(inputs, path){
      let result = [];
      
      for(let key in inputs){
        if(inputs.hasOwnProperty(key)){
          let x = inputs[key];
          if(path && path != ""){
            x = x[path];
          }
          
          if(result.indexOf(x) < 0){
            result.push(x);
          }
        }
      }
      //console.log( result )
      return result;
    } 
  });  
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <my-app></my-app>
  
  <dom-module id="my-app">
    <template>
      <ul>
        <template is="dom-repeat" items="[[devices]]" as="device">
          <li>[[device.name]]
          <ul>
            <template is="dom-repeat" items="[[device.components]]" as="component">
              <li>[[component.name]]
                <ul>
                  <my-distinct inputs="[[component.processors]]" path="type">
                  </my-distinct>
                
                </ul>
              </li>
            </template>
          </ul>
          </li>
        </template>
      </ul>
    </template>
  </dom-module>

  <dom-module id="my-distinct">
    <template>
        <template is="dom-repeat" items="[[outputs]]" as="processorName">
            <li>[[processorName]]
        </template>
    </template>
  </dom-module>
</body>

关于javascript - Polymer:dom-repeat 就像元素的局部变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42852689/

文章推荐： JavaScript 验证日期并返回日历的最后可用日期

文章推荐： javascript - 如何访问值为未知整数的 JS 对象属性？

文章推荐： javascript - 如何提取关闭某些变量的匿名回调？

C# 局部变量
有人可以解释一下为什么我得到: "use of unassigned local variable number_of_column" for: if (i f.LastWriteTime).Fir
MySQL 局部变量
我正在尝试为查询定义和初始化 MySQL 变量。我有以下几点: declare @countTotal int; SET @countTotal = select COUNT(*) from nG
ruby 局部变量
局部变量由小写字母或下划线(_)开头.局部变量不像全局和实变量一样在初始化前含nil值. ruby>$foo nil ruby>@foo nil ruby>foo ER
c - 结构指针初始化-局部变量
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
java - 局部变量 NullPointerException
当我单击 Login 类上的注册按钮时，出现 nullpointerException，它给出了该错误。我尝试修改本地和全局变量，但似乎没有任何方法可以修复该错误，我可能在 onClickListen
java - 局部变量 "i"在内部类修复中被访问？
我之前看过一些关于此的帖子，但我一直无法找到有关 actionListeners 的帖子。我正在尝试使用 JButton 数组创建井字棋。如果可能的话，如何在使用 for 循环临时变量的同时向它们添加
java - 从内部类获取外部类变量(局部变量)
我试图找出一种将 getView() 方法中的位置变量传递给内部类的方法。但是，这不能是最终变量，因为 ListView 中的每个项目都会调用 getView() ，因此它会发生变化。有没有办法访问该
JAVA(新手Q)局部变量
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 9 年前。 Improve th
c# - LINQ 局部变量
这对你们中的某些人来说似乎微不足道，但我对下面的这两个示例感到困惑。 int[] numbers = new int[] { 5, 4, 1, 3, 9, 8, 6, 7, 2, 0 }; int i
实例化后可从方法访问的 Javascript 局部变量？
这个问题在这里已经有了答案: How do JavaScript closures work? (86 个答案) 关闭 7 年前。所以我正在复习我的 vanilla Javascript，专门用于
java - Mockito 局部变量
我正在将mockito与spring(java 1.8)一起使用，并且我尝试在我的Answer对象中使用局部变量: public IProductDTO productForMock = null;
java在静态方法中注入(inject)局部变量
是否可以在java中为静态方法注入(inject)局部变量，比如 @Inject public void someMethod() { @MyInjectQualifier MyObjectC
ios - touchesBegan 局部变量
我有一个函数，每 2 秒被重复调用一次，每次从屏幕顶部带来一个具有随机纹理的球。我希望能够在 touchesBegan 中使用这个球，但我不能，因为它是一个局部变量。我试过将它设为全局变量，但这给了我
python - PyGame 局部变量
这是(我假设)一个基本问题，但我似乎无法弄清楚。给定以下代码: from src.Globals import * import pygame # Used to manage how fast t
JavaScript 局部变量。如何在圆圈中引用
这就是我在循环中引用全局变量的方法。 _.forEach(myTableName.detailsObjects, function (o, key) { if
赋值前引用的 Python 局部变量
我已经创建了一些代码: import numpy as np Length=(2.7)*10**-3 Nx=4 x = np.linspace(0, Length, Nx+1) # mes
c# - 局部变量 C#
如何获取局部变量？我有这个代码 if (ctrl is Control) { Control c = (Control)ctrl; foreach (object innerCtrl
ruby - 局部变量、实例变量和类变量有什么区别？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Difference between class variables and class instance
方法中的 Python 局部变量
我正在学习 Python 3，我有一个关于 Python 中面向对象编程的非常基本的问题。这是我的代码。 class pet: number_of_legs = 0 def count
java - 局部变量、对象引用及其内存分配
我有以下代码块: class Student{ int age; //instance variable String name; //instance varia

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Polymer:dom-repeat 就像元素的局部变量