2015-01-08 4 views
4

При чтении реализации core-xhr элемента команды Polymer, комментарии показали, что мы можем использовать следующий метод, чтобы использовать элемент для выполнения XMLHttpRequestsкак вызвать функцию внутри полимерного элемента

* core-xhr can be used to perform XMLHttpRequests. 
* 
*  <core-xhr id="xhr"></core-xhr> 
*  ... 
*  this.$.xhr.request({url: url, params: params, callback: callback}); 

запрос() метод объявляется в объявлении полимера, как следовать

Polymer('core-xhr', { 
    request: function(options) {...}, 
    toQueryString: function(params) {....}, 
       .... 
}); 

Я хотел бы создать без элементов пользовательского интерфейса, где можно, используя JavaScript, вызов на методах, объявленных в не-элементов пользовательского интерфейса, как показано. Похоже, что описанный выше метод был объявлен нормально, но я не смог получить доступ к моему методу.

Мой тестовый элемент

<polymer-element name="test-element" attributes="url"> 
<template> 

</template> 
<script> 
    Polymer({ 
     url:"", 
     alert: function() 
     { 
      alert("alert!"); 
     }   
    }); 
</script> 
</polymer-element> 

Моя тестовая страница

<body> 
    <test-element id = "test"></test-element> 
    <script> 
     $('#test').alert(); 
    </script 
</body> 

Я получил Uncaught TypeError: undefined is not a function. Кто-нибудь знает, пропустил ли я что-нибудь или возник вопрос о том, как я назвал мой метод оповещений?

Благодаря

+0

Какова ваша полимерная версия? –

+0

версия 0.5.1 Я считаю, – zen

ответ

3

Это потому, что вы пытаетесь вызвать апи на Jquery обертке. Вместо этого используйте $ ('# test'). Get (0) .alert(), чтобы получить интерфейс элемента или даже лучше сделать прямой вызов, используя document.querySelector («# test»). Alert()

$(document).ready(function() { 
 
    $('#test').get(0).alert(); 
 
    }); 
 

 
    // without jquery 
 
    // document.querySelector("#test").alert()
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
 
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<polymer-element name="test-element" attributes="url"> 
 
    <template> 
 

 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     url: "", 
 
     alert: function() { 
 
     alert("alert!"); 
 
     } 
 
    }); 
 
    </script> 
 
</polymer-element> 
 

 
<test-element id="test"></test-element>

+0

Это сработало! Благодаря! – zen

Смежные вопросы