【问题标题】:Get data from multiple input boxes in polymer从聚合物中的多个输入框中获取数据
【发布时间】:2015-01-27 07:30:02
【问题描述】:

我有一个“卡片”元素列表;每个都有一个纸张输入元素和一个按钮元素;每个元素都从外部 JSON 中获取一些数据(在 my-post-service 元素中,我嵌入了 core-ajax)。我的目标是,当用户在文本框中写入内容并单击相关按钮时,用户插入的特定卡片和文本的信息被发送到另一个函数。 这是这个聚合物元素的代码:

<polymer-element name="template-list">
<template>
    <my-post-service id="service" posts="{{posts}}" url="http://localhost:9111/v3/objects/templates">
    </my-post-service>
    <div id="pcId" layout horizontal wrap>
        <template repeat="{{post in posts}}">
            <my-post-card>
                <img src="http://localhost:9111/v3/resources/{{post.representation[0].icon}}" width="70" height="70">
                <h2>{{post.name}}</h2>
                <p>{{post.description}}</p>
                <paper-input name="paper-input" id="paperInputId" inputValue="{{value}}" label="Insert new object name..." floatingLabel="false"></paper-input>
                <add-object-button on-click="{{fetchName}}" template="{{post.name}}" name="{{objName}}"></add-object-button>
            </my-post-card>
        </template>

    </div>
    <style>
        :host {
            display: block;
            width: 100%;
        }
        my-post-card {
            margin-bottom: 30px;
        }
    </style>
</template>

<script>

    var objName;

    Polymer({
        fetchName: function () {
            objName = this.$.pcId.querySelector('#paperInputId').value;
        },
        get objName() {
            return objName;
        },
    });
</script>

目前,当我单击某个按钮时,我总是能够获取特定的卡片信息(通过模板属性),但我只能从第一个纸质输入元素(第一张卡片之一)中检索文本。

Ps 我是聚合物的新手,所以也许我错过了一些愚蠢的东西......!

【问题讨论】:

    标签: jquery polymer 2-way-object-databinding paper-elements


    【解决方案1】:
    objName = this.$.pcId.querySelectorAll('paper-input').value;
    

    我想这就是你要找的。​​p>

    【讨论】:

    • 是的,我已经尝试过了...但是使用 querySelectorAll 它不起作用(我从所有文本框中得到一个“未定义”值)...
    • 制作了一个 Plunker 来展示我的想法。 querySelectorAll 将获取所有元素但不获取值。因此您可以获得一组元素并解析它们并从每个元素中获取值。 plnkr.co/edit/u6shXfgMlUP3UykvLQr7?p=preview
    • 嗨 jimi,我已经解决了这个问题,将脚本部分移动到 模板中(这里是两个元素的代码,如果您有兴趣:plnkr.co/edit/YXw34FlaKke5imdDi3om?p=preview)。感谢您的帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-02-27
    • 1970-01-01
    • 2020-12-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-13
    相关资源
    最近更新 更多