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

Question

我正在将项目从 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 属性（绑定到文本字段的那个）？

Answer 1

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

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

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

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

demo