Polymer làm mới giá trị của thuộc tính được tính bằng phương pháp

Question

Chúng tôi hiện đang làm việc trên một dự án, trong đó chúng tôi sử dụng kết hợp AngularJS và Polymer.

Chúng tôi có một số cấu trúc, nhưng những gì thực sự quan trọng là đoạn mã này:

<template is="dom-bind" angupoly="{dataContainer:'dataContainer'}"> 
    <menu-list for="places" data="{{dataContainer.getSomeData()}}"> 
</template> 

Chúng tôi có một biến xác định trên $ phạm vi tên dataContainer, hiện đang được đặt trong một bộ điều khiển. Vấn đề là mã này được thực hiện trước khi bộ điều khiển chuẩn bị tài sản đó, vì vậy nó không xác định - đó ném:

[dom-bind :: _ annotatedComputationEffect]: Phương pháp tính toán dataContainer.getSomeData() không được định nghĩa

Và dữ liệu không bao giờ được làm mới một lần nữa và nó không hoạt động. Ngược lại, với một thuộc tính nó hoạt động (nó không quan trọng nếu nó là trạng thái đầu tiên là không xác định), nó được làm mới.

Vì đó là một điểm thực sự quan trọng trong ứng dụng của chúng tôi, chúng tôi muốn hỏi. Làm thế nào để đạt được hành vi cần thiết?

Cảm ơn, chúc bạn một ngày tốt đẹp! :)

Answer 1

Tôi không quen thuộc với polymer và nếu có possibilties để trì hoãn việc thực hiện mã polymer hoặc nếu có một chu kỳ tiêu hóa một có thể làm việc với như trong AngularJS. Nhưng tôi đoán bạn có thể tránh tình trạng này bằng cách đơn giản ng-if= kết hợp với <ng-include> bên AngularJS - vì nó không thêm các phần tử vào DOM, do đó tránh bất kỳ loại tương tác nào với polymer cho đến khi nó bao gồm.

Vì vậy, ví dụ:

<figure ng-if="dataContainer.getSomeData"> 
    <ng-include src="'template.html'"> 
</figure> 

Và trong vòng template.html của bạn (chưa sửa đổi) mã:

<template is="dom-bind" angupoly="{dataContainer:'dataContainer'}"> 
    <menu-list for="places" data="{{dataContainer.getSomeData()}}"> 
</template> 

tôi sẽ rất vui nếu điều này giúp bạn - nhưng như tôi đã nói nó chỉ là một phỏng đoán và tôi không biết nhiều về polymer và cách nó tương tác với DOM.

Answer 2

Lỗi mà bạn đang nhìn thấy không phải do dataContainer không xác định, nhưng chức năng mà bạn gọi trên đó. Polymer không hỗ trợ kiểu gọi hàm này trong ràng buộc dữ liệu. Từ docs:

dữ liệu ràng buộc liên kết với một tài sản hay phụ thuộc của một yếu tố tùy chỉnh (các yếu tố host) để sở hữu một hoặc thuộc tính của một phần tử trong DOM địa phương của nó (các phần tử con hoặc mục tiêu).

Bạn đang gọi một hàm trên thuộc tính không hoạt động. Nếu bạn muốn gọi hàm, bạn có thể thực hiện điều này với computed bindings.

<menu-list for="places" data="{{getData(dataContainer.*)}}"> 

Tuy nhiên, điều này giả định rằng trình đơn danh sách của bạn được đặt ở một số yếu tố phụ huynh Polymer và tôi không chắc chắn nếu điều này là trường hợp ở đây là bạn sử dụng một dom-bind. Tuy nhiên, nếu bạn có một phần tử cha, bạn có thể thêm hàm đã tính vào đó.

Polymer({ 
    is: 'parent-element', 
    properties: {dataContainer: ....}, 
    getData: function() { 
     return dataContainer.getSomeData(); 
    } 

}); 

getData sẽ được gọi là bất kỳ lúc nào dữ liệuSở hoặc thay đổi thuộc tính phụ của nó.