从 Web 组件中的函数访问属性答案

【问题标题】：Accessing properties from a function in Web Components从 Web 组件中的函数访问属性
【发布时间】：2017-10-26 18:11:06
【问题描述】：

我正在将项目从 Angular 转换为 Web 组件/自定义元素，并尝试通过为以下文本字段创建绑定来替换 ng-model：

<input type="search" class="form-control search_input" placeholder="Search for someone new" value$="[[userLookup:input]]" required autocomplete="off">

显然，由于这是从 Angular 转换而来的，我需要能够在 JavaScript 函数中访问该值：

(function(customElements) {
    class RecentSearch extends PolymerMixins.LightDomMixin(Polymer.Element) {
        static get is() { return 'recent-search'; }

        static get properties() {
            return {
                properties: {
                    user: {
                        type: Object
                    },
                    userLookup: {
                        type: String,
                        reflectToAttribute: true,
                        value: '',
                    },
                },
            };
        }

        lookupUser() {
            if (this.userlookup) {
                $state.go('users', { query: userlookup });
            }
        };
    }
    customElements.define(RecentSearch.is, RecentSearch);
})(window.customElements);

如何从lookupUser 函数内部访问userLookup 属性（绑定到文本字段的属性）？

【问题讨论】：

标签： javascript polymer web-component polymer-2.x

【解决方案1】：

您已经通过this.userLookup 从lookupUser() 访问userLookup 正确。事件处理程序的上下文（即this）是 Polymer 元素实例。

但是，您的数据绑定错误地是单向数据绑定，因此userLookup 不会更新。这种binding 需要是双向的（即带大括号）并且不能使用属性绑定（即$=）。

正确的用法应该是这样的：

<input placeholder="Search for someone new"
       value="{{userLookup::change}}" />

demo

【讨论】：