Cách thêm thuộc tính hàm vào phần tử polymer

Tôi muốn tạo một phần tử polymer có thuộc tính hàm, sẽ được gọi khi nhận được phản hồi thành công.Cách thêm thuộc tính hàm vào phần tử polymer

<foo-bar url="/api/getdata" succCallback="func"></foo-bar> 

func function(){ 
    alert('hi'); 
}

Tôi cố gắng này:

<polymer-element name="foo-bar" attributes="url succCallback"> 
<template> 
     <core-ajax id="ajax" method="POST" 
     url="{{url}}" 
     contentType="application/json" 
     handleAs="json" 
     on-core-response="{{handleResponse}}"></core-ajax> 
</template> 
<script> 
    Polymer({ 
     handleResponse: function(e){ 
      var response = e.detail.response; 
      if (response.status === 'success') { 
       // call succCallback 
       this.fire(succCallback); 
      } 
     } 
    }); 
</script> 
</polymer-element>

Nó không làm việc. Làm thế nào tôi có thể gọi hàm succCallback này? Cảm ơn!

Nguồn

2015-01-02 Jie

Tôi nghĩ rằng không có cách nào, bởi vì

attributes attr chỉ tiêu thụ dây.

giải pháp khả thi có thể là như sau:

<foo-bar url="/api/getdata" succEventTrigger="foo-bar-done"></foo-bar>

Sau đó, đính kèm listener với polyme và bắt succEventTrigger

var fooBar = document.querySelector('foo-bar'); 
    sayHello.addEventListener('foo-bar-done', function(e) { 
    alert('hi'); 
    });

và polymer:

<polymer-element name="foo-bar" attributes="url succEventTrigger"> 
<template> 
     <core-ajax id="ajax" method="POST" 
     url="{{url}}" 
     contentType="application/json" 
     handleAs="json" 
     on-core-response="{{handleResponse}}"></core-ajax> 
</template> 
<script> 
    Polymer({ 
     succEventTrigger : '', 
     handleResponse: function(e){ 
      var response = e.detail.response; 
      if (response.status === 'success') { 
       // trigger callback event with parameter if needed 
       this.fire(succEventTrigger, { param : value }); 
      } 
     } 
    }); 
</script> 
</polymer-element>

Nguồn

2015-01-02 22:55:20

Cảm ơn! Nó hoạt động! Tôi thấy rằng nó cũng hoạt động nếu tôi gọi succCallback như thế này 'windows [succCallback]();', nhưng tôi không biết nếu có bất kỳ tác dụng phụ bằng cách sử dụng này. – Jie

Đó là sự thật nó hoạt động như là tốt, nhưng tôi đặc biệt tránh phương pháp đó vì nó liên quan đến sự tương tác với đối tượng cửa sổ .. mà không phải là tốt theo mặc định :) –

Thử thay thế this.fire(succCallback); bằng this.fire(succCallback());.

Nguồn

2015-01-02 21:52:11 SalmonKiller

Nó không làm việc một trong hai. Đã nhận được lỗi này: Uncaught TypeError: string không phải là hàm – Jie

Edit: Tôi nhận ra một trễ vài phút, câu trả lời đầu tiên của tôi đã bỏ lỡ điểm thất bại thực sự. Định nghĩa nguyên tố polymer là tốt, nhưng việc sử dụng nó cần phải được bọc trong một khuôn mẫu, do đó bạn có thể làm một cái gì đó như thế này:

<body> 
<template is="auto-binding"> 
    <foo-bar url="/api/getdata" succCallback="{{func}}"></foo-bar> 
</template> 
<script> 
    var scope = document.querySelector('template[is=auto-binding]'); 

    scope.func = function (whatever) { 
    console.log('yay!'); 
    }; 
</script> 
</body>

Câu trả lời ban đầu dưới đây vẫn có thể hữu ích - đặc biệt là nơi gọi lại là đã sử dụng.

Sử dụng 'xuất bản' khối thay vì các thuộc tính ... er, thuộc tính (Tôi nhận ra bây giờ mà đây không phải là nguyên nhân của lỗi):

<polymer-element name="foo-bar"> 
<template> 
     <core-ajax id="ajax" method="POST" 
     url="{{url}}" 
     contentType="application/json" 
     handleAs="json" 
     on-core-response="{{handleResponse}}"></core-ajax> 
</template> 
<script> 
    Polymer({ 
     publish: { 
      url: undefined, 
      succCallback: undefined, 
     }, 
     ready: function(){ 
      this.url = this.url || "some default"; 
      this.succCallback = this.succCallback || function(){}; 
     }, 
     handleResponse: function(e){ 
      var response = e.detail.response; 
      if (response.status === 'success') { 
       // call succCallback 
       this.succCallback(); 
      } 
     } 
    }); 
</script> 
</polymer-element>

Tôi đã thực sự tìm kiếm một câu trả lời cho 'đây là một mô hình với lực kéo trong Polymer, hoặc là nó nản lòng?'. Vì việc sử dụng callbacks thậm chí không được đề cập trong số Communication and Messaging docs Tôi khá tò mò.

Nguồn

2015-01-18 03:20:21 ggranum

Khi tạo một thể hiện của phần tử polymer tùy chỉnh của bạn, bạn cần phải thêm dấu ngoặc tham số vào tên hàm được chuyển thành thuộc tính.

ví dụ: thay vì:

<foo-bar url="/api/getdata" succCallback="func"></foo-bar>

làm:

<foo-bar url="/api/getdata" succCallback="func()"></foo-bar>

theo cố gắng và đúng sự thật (chưa có phần lỗi thời):

<body onload="handleLoad()"></body>

Nguồn

2015-05-15 13:07:32 benjineer

Cách thêm thuộc tính hàm vào phần tử polymer

Trả lời

Các vấn đề liên quan