Phần tử gói văn bản có gắn kết trong Polymer 1.0

Question

Tôi đã tạo thành phần web tùy chỉnh bằng Polymer, kết thúc văn bản và thay đổi nó một chút (chuyển thành chữ hoa trong bằng chứng khái niệm này).

Phần tử tự hoạt động OK với nội dung tĩnh. Tuy nhiên, khi nội dung được liên kết động, thành phần không hiển thị nội dung.

Ví dụ:

<my-wrapper>Hello, World!</my-wrapper> <!-- Works --> 
<my-wrapper>[[someText]]</my-wrapper> <!-- Doesn't work --> 

Hiện nay tôi đang sử dụng observeNodes, trong đó quản lý để kích hoạt các văn bản ban đầu biến đổi, nhưng thất bại trong việc gây ra những thay đổi phụ tuần tự.

nguyên mẫu hiện tại của tôi được định nghĩa là:

<dom-module id="my-wrapper"> 
    <template> 
    <span id="placeholder"></span> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-wrapper', 
     ready: function() { 
     var self = this; 
     Polymer.dom(Polymer.dom(this)).observeNodes(function(info) { 
      self.$.placeholder.textContent = info.target.textContent.toUpperCase(); 
     }); 
     /*var mutationObserver = new MutationObserver(function(e) { 
      console.log(e); 
     }); 
     mutationObserver.observe(this.root, {characterData: true, childList: true});*/ 
     }, 
    }); 
    </script> 
</dom-module> 

Và một JSBin làm việc cho các vấn đề nêu trên có thể được tìm thấy ở đây: http://jsbin.com/jumewuzuho/1/edit?html,console,output.

Bất kỳ đề xuất nào về cách nắm bắt sự thay đổi của nội dung (ánh sáng DOM), để tôi có thể tái biến đổi văn bản?

Như bạn có thể thấy trong khối nhận xét của mã, tôi đã thử sử dụng MutationObserver, nhưng không tạo được một nguyên mẫu hoạt động. Tôi đoán là tôi đã không sử dụng nút chính xác (this.root trong trường hợp của tôi).

Answer 1

Tôi không nghĩ ObserveNodes (hoặc MutationObserver) là cách tốt nhất để tiếp cận này. ObserveNodes bài hát khi trẻ em nút được thêm vào và xóa khỏi phần tử của bạn.

Trong trường hợp của bạn, các nút DOM là không phải là đang được thêm hoặc xóa, nó chỉ đơn giản là văn bản bên trong của phần tử đang thay đổi. Những thay đổi này không được chọn bởi ObserveNodes.

Tôi muốn giới thiệu cách tiếp cận khác, mà theo ý kiến ​​khiêm tốn của tôi là phù hợp hơn với cách polyme làm việc, sử dụng content tag:

Để hỗ trợ thành phần của DOM ánh sáng của một nguyên tố với DOM địa phương của mình, Polymer hỗ trợ phần tử nội dung. Yếu tố content cung cấp một điểm chèn tại đó DOM ánh sáng của một nguyên tố được kết hợp với DOM địa phương

tôi sẽ sử dụng thẻ nội dung để tạo một điểm chèn và sau đó phong cách nó qua cái bóng DOM (text-transform: chữ hoa):

<dom-module id="my-wrapper"> 
    <template> 
    <style> 
     :host { 
     text-transform: uppercase; 
     } 
    </style> 
    <content></content> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-wrapper' 
    }); 
    </script> 
</dom-module>