从Web组件

Question

我正在将项目从Angular转换为Web Components / Custom Elements，并尝试通过为以下文本字段创建绑定来替换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);

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

Answer 1

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

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

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

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

demo