dropdownlist绑定数据库怎么用 详解dropdownlist控件用法(2)

dropdownlist绑定数据库怎么用

然后我们创建的每个 Web 组件都扩展了这个 CustomElement 基类：

export class MyComponent extends CustomElement

如果你想直接查看代码，可以访问 Github 链接。

我们将 CustomElement 的内部 state 属性绑定到视图来实现数据绑定：

class CustomElement extends HTMLElement { constructor() { super(); this.state = {}; }}

我的第一个想法是将 this.state 实现为 Proxy，这样 state 对象的任何突变都将被自动拦截；但由于 Proxy 可能会影响性能，因此我决定实现一个 setter，它还能同时设置多个属性：

class CustomElement extends HTMLElement { ... setState(newState) { Object.entries(newState) .forEach(([key, value]) => { this.state[key] = this.isObject(this.state[key]) && this.isObject(value) ? {...this.state[key], ...value} : value; }); }}

setState 方法遍历 newState 对象的所有条目，并将所有值设置为 this.state 上的对应属性，随后我们就应该使用这些值来更新视图。

通过标准 data 属性将值绑定到视图上，在本例中为 data-bind：

<p data-bind="title"></p>

这里的 textContent 绑定到负责管理视图的组件内的 this.state.title 的值上：

class DemoElement extends CustomElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <p data-bind="title"></p> `; }}const element = document.querySelector('demo-element');element.setState({title: 'Hello World'});// the paragraph will now contain the text "Hello World"

这种绑定可以达到任意深度，所以下面这种情况也能做到：

<p data-bind="user.address.city"></p>element.setState({ user: { address: { city: 'Amsterdam' } }});---> <p>Amsterdam</p>

还可以将数据绑定到 Web 组件的特定属性。在此示例中，数据绑定到的 title 属性上：

<parent-element> <demo-element data-bind="title:name"></demo-element></parent-element>parentElement.setState({name: 'foo'}); //demoElement.title === 'foo'

视图的更新实际是在 CustomElement 中的 updateBindings 方法中实现的。通过 setState 方法更新 state 时，它会解析更新的属性以查找绑定到这些属性的 HTML 元素。

例如下面这样：

element.setState({ user: { address: { city: 'Amsterdam' } }});

更新 Web 组件内的
this.state.user.address.city，并将数据对象中的键转换为 user.address.city，然后使用它来查找这个数据绑定的元素：

const elements = this.shadowRoot.querySelectorAll('[data-bind$="user.address.city"]');

这将查找所有的 data-bind 属性以 user.address.city 结尾的元素（注意 data-bind 结尾的），因此它将找到 data-bind=“user.address.city”，但也可以找到 data-bind=“ name:user.address.city“，其中数据专门绑定到 name 属性。

每当数据绑定到元素的特定属性（如 data-bind=“name:user.address.city”）时，组件将检查该元素是否也是扩展 CustomElement 的 Web 组件；如果是，则通过它的 setState 方法更新该属性。这样，数据绑定就能一直传播到所有子组件上。