2017-02-10 7 views
0

これで多くを検索しましたが、回答が見つかりませんでした。私は親要素に子要素から値を基準に合格したい子のカスタム要素からポリマーの親カスタム要素に属性値を送信する方法

<!DOCTYPE html> 
<html> 
<head> 
    <link href="../bower_components/polymer/polymer.html" rel="import"> 
    <link href="netflix-search-criteria.html" rel="import"> 
    <link href="netflix-search-result.html" rel="import"> 
    <!-- Element Imports --> 
</head> 

<dom-module id="netflix-search"> 
    <style> 
    /* CSS rules for your element */ 
    </style> 
    <template> 
    <netflix-search-criteria></netflix-search-criteria> 
    <h1> here it is + {{criteria}}</h1> 
    <!--<netflix-search-result content="{{criteria}}"></netflix-search-  result>--> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: "netflix-search", 
    properties: { 

    } 

     }, 
    ready: function(e){ 

    } 
    }); 
</script> 

The child element is : 

    <!DOCTYPE html> 
<html> 
<head> 
    <link href="../bower_components/polymer/polymer.html" rel="import"> 
    <link href="../bower_components/paper-material/paper-material.html"  rel="import"> 
    <link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import"> 
    <link href="../bower_components/paper-listbox/paper-listbox.html" rel="import"> 
    <link href="../bower_components/paper-item/paper-item.html" rel="import"> 
    <!-- Element Imports --> 
</head> 

<dom-module id="netflix-search-criteria"> 
    <style> 
    /* CSS rules for your element */ 
    </style> 
    <template> 
    <paper-material elevation="1"> 
    <paper-dropdown-menu id="mymenu" label="What do you know about the content?" attr-for-selected="value" 
    selected="{{selItem}}" on-iron-select="_itemSelected"> 
     <paper-listbox class="dropdown-content"> 
     <paper-item>Movie Name</paper-item> 
    <paper-item>Actor</paper-item> 
    <paper-item>Director</paper-item> 
    </paper-listbox> 
    </paper-dropdown-menu> 
    <template is="dom-if" if="{{show}}"> 
    <paper-input label="Enter Search content" on-input="_search"> 
    </paper-input> 
    <h1>{{criteria}}</h1> 
    </template> 
    </template> 
</dom-module> 
<script>  
    Polymer({ 
    is: "netflix-search-criteria", 
    _itemSelected : function(e) { 
    console.log("Coming here" + e.target.selectedItem.innerText); 
    this.selItem = e.target.selectedItem.innerText; 
    if(this.selItem == 'Movie Name' || this.selItem == 'Actor' 
    || this.selItem == 'Director') 
    { 
     this.show = true; 
    } 
    }, 
    _search : function(e) { 
    var cont = e.target.value; 
    if(cont.length > 3){ 
    this.criteria = this.selItem + "=" + cont; 
    console.log("Coming here" + this.criteria); 
    } 

    }, 
    properties: { 
      selItem: { 
      type: String, 
      value: "" 
      }, 
      show: { 
      type: Boolean, 
      value: false 
      }, 
     criteria: { 
      type: String, 
      value: "Show", 
      notify: true, 
      reflecToAttribute: true 
     } 
    }, 
    ready: function(e){ 

    } 
    }); 
</script> 

Netflixの検索:私は、次のコードを持っています。しかし、わからない

答えて

0

はそれを考え出したことを行う方法:

<!DOCTYPE html> 
<html> 
<head> 
<link href="../bower_components/polymer/polymer.html" rel="import"> 
<link href="../bower_components/paper-material/paper-material.html" rel="import"> 
<link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import"> 
<link href="../bower_components/paper-listbox/paper-listbox.html" rel="import"> 
<link href="../bower_components/paper-item/paper-item.html" rel="import"> 
<!-- Element Imports --> 
</head> 

<dom-module id="netflix-search-criteria"> 
    <style> 
    /* CSS rules for your element */ 
    </style> 
    <template> 
<paper-material elevation="1"> 
<paper-dropdown-menu id="mymenu" label="What do you know about the content?" attr-for-selected="value" 
selected="{{selItem}}" on-iron-select="_itemSelected"> 
    <paper-listbox class="dropdown-content"> 
    <paper-item>Movie Name</paper-item> 
    <paper-item>Actor</paper-item> 
    <paper-item>Director</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu> 
<template is="dom-if" if="{{show}}"> 
    <paper-input label="Enter Search content" on-input="_search"> 
    </paper-input> 
    <h1>{{content}}</h1> 
    </template> 
    </template> 
</dom-module> 
<script>  
Polymer({ 
    is: "netflix-search-criteria", 
_itemSelected : function(e) { 
console.log("Coming here" + e.target.selectedItem.innerText); 
    this.selItem = e.target.selectedItem.innerText; 
    if(this.selItem == 'Movie Name' || this.selItem == 'Actor' 
    || this.selItem == 'Director') 
    { 
     this.show = true; 
    } 
    }, 
    _search : function(e) { 
var cont = e.target.value; 
if(cont.length > 3){ 
this.criteria = this.selItem + "=" + cont; 
console.log("Coming here" + this.criteria); 
    } 

    }, 
properties: { 
     selItem: { 
     type: String, 
     value: "" 
     }, 
     show: { 
     type: Boolean, 
     value: false 
     }, 
    criteria: { 
     type: String, 
     value: "Show", 
     notify: true, 
     reflecToAttribute: true 
     } 
    }, 
    ready: function(e){ 

    } 
    }); 
</script> 
:ここ

コード 親クラス

<!DOCTYPE html> 
<html> 
<head> 
<link href="../bower_components/polymer/polymer.html" rel="import"> 
<link href="netflix-search-criteria.html" rel="import"> 
<link href="netflix-search-result.html" rel="import"> 
<!-- Element Imports --> 
</head> 

<dom-module id="netflix-search"> 
    <style> 
/* CSS rules for your element */ 
</style> 
<template> 
<netflix-search-criteria criteria={{content}}></netflix-search-criteria> 
<netflix-search-result search="{{content}}"></netflix-search-result> 
</template> 
</dom-module> 
<script> 
Polymer({ 
is: "netflix-search", 
properties: { 
content: { 
     type: String, 
     value: "No", 
     notify: true, 
     reflecToAttribute: true 
    } 
}, 
ready: function(e){ 

} 
    }); 
</script> 

子クラスであります

関連する問題