WeChat アプレットで双方向データバインディングを実装する方法-WeChatの開発-php.cn

ネイティブミニプログラムの開発では、データフローは一方向であり、双方向にバインドすることはできませんが、双方向バインド機能を実装するのは非常に簡単です。

以下は、ミニプログラムフレームワーク minapp の双方向バインディングの原理についてです。minapp では、wxml テンプレート内のコンポーネントの属性名の後に .sync を追加するだけで双方向バインディングを実現できます。以下の原理を説明するため、処理が少し複雑になるかもしれませんが、実は、minapp フレームワークはすでにその複雑な詳細を処理しています。

まず第一に、データの双方向バインディングを有効にするには、多すぎるデータソース を避ける必要があります。
データが上から下へ自然に流れる場合、各コンポーネントがデータ値の一貫性を保ちながら独自のデータを維持する場合、これは可能ですが、実装プロセスは単純ではありません。
しかし、統一されたデータソースを得るために mobx や redux を使用してデータをグローバルに管理する必要はありません。
双方向バインディングは親コンポーネントと子コンポーネントの間にのみ存在し、データは親から子に渡されるため、子コンポーネントがデータを更新するたびに、親コンポーネントのデータをデータソースとして優先的に使用できます。
event メカニズムは、親コンポーネントがデータを更新した後、更新されたデータを子コンポーネントに自然に渡すため、双方向のフローを実現します。データ！

WeChat アプレットで双方向データバインディングを実装する方法

すべてのデータが双方向バインディングを必要とするわけではなく、すべてのデータが独自の内部データを持つこともできるわけではありません。したがって、これには、私たちが話したい 2 番目の質問が含まれます:

双方向バインディングが必要なデータと、サブコンポーネント自体によって維持される必要があるデータを区別する。

vueを使ったことがある人は、vueで双方向バインディングを実現するには、テンプレートで特別な処理を行う必要があることを知っているはずです。たとえば、親コンポーネントの parentAttr を子コンポーネントの childAttr に双方向にバインドする場合は、親コンポーネントのテンプレートにこれを記述する必要があります:

<child></child>

ログイン後にコピー

parentAttr 双向绑定到子组件的 childAttr 上，需要在父组件的模板中这样写：

<child></child><child></child>

ログイン後にコピー

但是小程序并没有这样的简单的语法，小程序的 wxml 语言的属性名中甚至都不允许出现 " . " 这样的字符。回到我们的问题上来，子组件需要知道哪些属性需要双向绑定，哪些属性需要自己维护，
给模板加个字段（syncAttrMap）专门来告诉子组件需要双向绑定的数据集合不就行了么。如，可以将上面的示例写成微信小程序支持的写法：

// 父组件Component({
  methods: {
    onSyncAttrUpdate(e) {
      this.setData(e.detail) // 子组件传来的需要更新的数据
    }
  }})

ログイン後にコピー

接着，就需要处理子组件数据更新的问题了，在子组件中有两部分数据，一部分是内部数据，另一部分是父组件中的数据，
子组件可以通过读取属性 syncAttrMap 来得到哪些数据是内部的数据，哪些数据是父组件的数据，并且可以知道对应
的父组件中的数据的键名是什么。由于原生的组件方法 setData 不会管你是内部数据，还是父组件中的数据，只要
你调用它去更新数据，它只会更新内部的数据。所以需要另外实现一个新的方法，来自动判断数据源，如果是内部数据，
则直接调用 setData ；如果是双向绑定中的父组件数据，则可以触发一个事件去通知父组件去更新对应的值。

所以根据上面的描述，父组件需要有个监听函数，子组件需要有个智能的 setData 函数。不防将父组件的监听函数
命名为 onSyncAttrUpdate，将子组件的智能 setData 函数命名为 setDataSmart，则可以有如下代码：

<child></child>

ログイン後にコピー

// 子组件Component({
  properties: {
    childAttr: String,
    syncAttrMap: String  },
  methods: {
    // 子组件更新数据时，只要调用此方法即可，而不是 `setData`
    setDataSmart(data) {
      // splitDataBySyncAttrMap 函数的实现过程就不说了，只是将对象拆分，大家应该都能实现
      let {parentData, innerData} = splitDataBySyncAttrMap(data, this.data.syncAttrMap)      // 内部数据使用 setData 更新
      if (Object.keys(innerData).length) {
        this.setData(innerData) // setData 中还支持 callback 的回调，为了简化代码，这里不讨论
      }
      // 双向绑定的父组件数据触发事件让父组件自己去更新
      if (Object.keys(parentData).length) {
        this.triggerEvent('syncAttrUpdate', parentData)      }
    }
  }})

ログイン後にコピー

// BaseComponentconst BaseComponent = {
  properties: {
    syncAttrMap: String  },
  methods: {
    setDataSmart() {
      // ...
    },
    onSyncAttrUpdate() {
      // ...
    }
  }}

ログイン後にコピー

到此，一个简单的双向绑定功能就完成了。但是由于子组件也有可能包含其它组件，也就是说子组件也可以是父组件，而父组件同样也
可以是子组件。所以上面的 onSyncAttrUpdate setDataSmart 函数需要在每个组件中都实现，所以不防
定义一个公共对象 BaseComponentしかしアプレットはこの単純な構文を実行しません。アプレットの wxml 言語では、属性名に「.」などの文字を使用することもできません。問題に戻ります。

サブコンポーネントは、どの属性が双方向バインディングを必要とし、どの属性が独自に維持される必要があるかを知る必要があります🎜 具体的には、フィールド (syncAttrMap) をテンプレートに追加します。サブコンポーネントに双方向バインディングが必要であることを伝えます。決定されたデータセット🎜は次のようになります。十分。たとえば、上記の例は WeChat アプレットでサポートされている方法で記述することができます: 🎜

<child></child><child></child>

ログイン後にコピー

// BaseComponentconst BaseComponent = {
  properties: {
    syncAttrMap: String  },
  methods: {
    setDataSmart() {
      // ...
    },
    onSyncAttrUpdate() {
      // ...
    }
  }}

ログイン後にコピー

然后将 BaseComponent minin 到每个组件的对象上去就可以了；另外小程序中还有一个特殊的组件：Page，虽然 Page 和 Component 结构是两样的，
但它也应该算是一个组件，不过它一定是父组件，不可能是别的组件的子组件，所以还需要将 onSyncAttrUpdate 方法写了所有的 Page 定义中。
所有这些就是 minapp 的双向绑定的基本原理了。

等等，最后还有一件事：wxml 模板，不能让用户每次写双向绑定的时候都要写那么复杂语句吧？当然不用，minapp 在编译时，会将模板做个简单的转化：