聚合物如何将纸张输入值绑定到铁-ajax

Question

The following is my page code 以下是我的页面代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GP and Practice search</title>   <!-- Scripts -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="elements/elements.html" />
    <link rel="stylesheet" type="text/css" href="Styles/styles.css" />
    <link rel="stylesheet" type="text/css" href="Styles/home.css"/>
    <!-- google fonts definitions -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>

</head>

<body unresolved class="fullbleed layout vertical">
    <dom-module id="page-scafolding">
        <template>
            <paper-drawer-panel elevation="1">
                <paper-header-panel main mode="waterfall-tall">
                    <paper-toolbar id="mainToolbar">
                        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                        <span class="flex"></span>
                        <paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
                        <input type="text" id="searchText" hidden$="{{hideSearch}}" onkeypress="handleKeyPress(event);" />
                        <div class="middle paper-font-display2 app-name ident">Search</div>
                    </paper-toolbar>
                    <paper-material elevation="1" class="contentContainer" >
                        <div id="Content" >
                            <span>
                                <paper-input id="searchCriteria" 
                                             class="searchBox" 
                                             label="Code or name of the GP or Practice you are looking for?"  />
                            </span>
                            <div style="text-align:center; padding:10px;">
                                <paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice">Search for Practice</paper-button>
                                <paper-button tabindex="0" raised="true" class="colorful" on-click="searchPractice">Search for GP</paper-button>
                            </div>
                            <div id="SearchResult">
                                <template is="dom-repeat" items="{{data}}">
                                    <p><span>{{item.Name}}</span> (<span>{{item.PracticeCode}}</span>)</p>
                                </template>
                            </div>
                        </div>
                    </paper-material>
                    <iron-ajax id="GPSearch"
                               url="/GPPractices.ashx"
                               handle-as="json"
                               last-response="{{data}}"
                               params='{{ajaxParams}}'
                               handleerror="handleError">

                    </iron-ajax>
                </paper-header-panel>
            </paper-drawer-panel>
        </template>
        <script>
            Polymer({
                is: "page-scafolding",
                ready: function () {
                    this.hideSearch = true;
                    this.$.searchText.keyup(function (e) {
                        alert('off to search for something!');
                    });
                },
                ajaxParams: {
                    type: String,
                    computed: 'buildSearchRequest();'
                },
                buildSearchRequest: function () {
                    return {
                        Command: 'Search',
                        Criteria: this.$.searchCriteria
                    }
                },
                srchandler: function () {
                    // search for contents of search box is showing, otherwise show it.
                    if (!this.hideSearch)
                    {
                        alert('off to search for something!');
                    }
                    else {
                        this.hideSearch = !this.hideSearch;
                        if (!this.hideSearch) {
                            this.$.searchText.focus();
                        }
                    }
                },
                searchPractice: function () {
                    try {           
                        this.$.GPSearch.generateRequest();
                    }
                    catch (e) {
                        alert("Whoops! " + e.message);
                    }

                },
                handleError: function (request, error) {
                    alert('Whoops! ' + error);
                }
            });
        </script>
    </dom-module>

    <page-scafolding />
</body>
</html>

I have got the ajax call being made and a call to GPPractices.ashx is being made. 我已经进行了ajax调用，并且正在调用GPPractices.ashx。 What I am trying to do is pass two parameters to this page. 我要做的是将两个参数传递给此页面。 One is Command and has the value 'search', the other parameter is whatever is input into the paperInput called searchCriteria. 一个是Command，其值为'search'，另一个参数是输入到paperInput中的任何一个名为searchCriteria的参数。

The trouble is instead of getting two parameters Command and Criteria. 麻烦的是没有获得两个参数Command和Criteria。 I am getting an empty QueryString and it does not look like buildSearchRequest is ever called. 我得到一个空的QueryString，它看起来不像buildSearchRequest。

So how can I get it so that if I type say 'abba' into the paper-input the query string should be 那么如何才能得到它，以便如果我在纸张输入中输入'abba'，那么查询字符串应该是

Command=search&criteria=abba

Answer 1

I put a simplified working version of your code below. 我在下面放了一个简化的代码工作版本。 Here are some notes: 以下是一些注意事项：

This declaration 这个宣言
```
 ajaxParams: { type: String, computed: 'buildSearchRequest();' }, 
```
is a property definition and has to go inside properties object. 是一个属性定义，必须进入properties对象。
Callback values such as 回调值如
```
 computed: 'buildSearchRequest();' 
```
look like functions but they aren't actual code, and need no trailing ; 看起来像函数，但它们不是实际代码，不需要尾随;
Your computed function needs to have an argument to tell it when to recompute. 您的计算函数需要有一个参数来告诉它何时重新计算。 I modified it to look like this: 我修改它看起来像这样：
```
 computed: 'buildSearchRequest(searchCriteria)' 
```
and I bound searchCriteria to the input value . 我将searchCriteria绑定到输入value 。
Event handlers in Polymer code use on- notation, so Polymer代码中的事件处理程序使用on- notation，因此
```
 onkeypress="handleKeyPress(event);" 
```
should be 应该
```
 on-keypress="handleKeyPress" 
```
iron-ajax error notification is via event called error , so iron-ajax错误通知是通过称为error事件，所以
```
 handleerror="handleError" 
```
should be 应该
```
 on-error="handleError" 
```
I added the stringify bit and the output of the params just so you could see it calculating as you type, it's not necessary for your use case. 我添加了stringify位和params的输出，因此您可以在键入时看到它计算，这对您的用例来说不是必需的。
Only a tiny handful of elements are void in HTML (need no closing tag). HTML中只有极少数元素无效（无需关闭标记）。 You should avoid doing <tag-name/> because it will cause trouble eventually. 你应该避免使用<tag-name/>因为它最终会导致麻烦。

Live: http://jsbin.com/sorowi/edit?html,output 直播： http ： //jsbin.com/sorowi/edit？html，output

    <dom-module id="page-scafolding">
      <template>

        <paper-input 
          label="Code or name of the GP or Practice you are looking for?" 
          value="{{searchCriteria}}">
        </paper-input>

        <br>

        <div style="text-align:center; padding:10px;">
          <paper-button tabindex="0" raised="true" style="background-color: lightblue;" on-click="searchPractice">Search for Practice</paper-button>
        </div>

        <iron-ajax id="GPSearch"
                   url="/GPPractices.ashx"
                   handle-as="json"
                   last-response="{{data}}"
                   params="{{ajaxParams}}"
                   on-error="handleError">   
        </iron-ajax>

        <br><br>
        ajaxParams: <span>{{stringify(ajaxParams)}}</span>

        <div id="SearchResult">
          <template is="dom-repeat" items="{{data}}">
            <p><span>{{item.Name}}</span> (<span>{{item.PracticeCode}}</span>)</p>
          </template>
        </div>

      </template>
      <script>
        Polymer({

          is: "page-scafolding",

          properties: {
            ajaxParams: {
              type: String,
              computed: 'buildSearchRequest(searchCriteria)'
            }
          },

          stringify: JSON.stringify, 

          buildSearchRequest: function (criteria) {
            return {
              Command: 'Search',
              Criteria: criteria
            };
          },

          searchPractice: function () {
            this.$.GPSearch.generateRequest();
          },

          handleError: function(e) {
            alert('Whoops! ' + e.detail);
          }

        });
      </script>
  </dom-module>

HTH HTH

Answer 2

I got it to work. 我得到了它的工作。 Not sure if this is officially the best way, but by changing the code of the searchPractice function to the following - the correct QueryString is sent and the search works. 不确定这是否是正式的最佳方式，但是通过将searchPractice函数的代码更改为以下内容 - 发送了正确的QueryString并且搜索工作正常。

            searchPractice: function () {
                try {
                    this.$.GPSearch.params = {
                        Command: 'Search',
                        Criteria: this.$.searchCriteria.value
                    };
                    this.$.GPSearch.generateRequest();
                }
                catch (e) {
                    alert("Whoops! " + e.message);
                }

            }

聚合物如何将纸张输入值绑定到铁-ajax

问题描述

2 个解决方案

解决方案1
8 2015-06-26 08:15:51

解决方案2
0 已采纳 2015-06-25 20:53:50

聚合物如何将纸张输入值绑定到铁-ajax

问题描述

2 个解决方案

解决方案1 8 2015-06-26 08:15:51

解决方案2 0 已采纳 2015-06-25 20:53:50

解决方案1
8 2015-06-26 08:15:51

解决方案2
0 已采纳 2015-06-25 20:53:50