layuiデータの結合をどのように実現しますか

2年 ago
結衣, 春花
1 minute

レイアウトでは、テンプレートエンジンを使用してデータバインディングを実装できます。以下にデータバインディングを実装するためのコード例を示します。

  1. HTML内でテンプレートを定義すること
<script type="text/html" id="template">
<div>{{ d.name }}</div>
<div>{{ d.age }}</div>
<div>{{ d.gender }}</div>
</script>
  1. JavaScriptでテンプレートエンジンを使用してデータをバインディングする
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
var data = {
name: '张三',
age: 20,
gender: '男'
};
var getTpl = template.innerHTML;
laytpl(getTpl).render(data, function(html){
document.getElementById('container').innerHTML = html;
});
});

レイアウトモジュールをインポートするために、layui.useメソッドを使用します。名前、年齢、性別などの情報を格納するデータオブジェクト、dataを定義します。document.getElementByIdを使用してテンプレートの内容を取得し、次に、laytpl（getTpl）.render（data、function（html）{}）メソッドを使用して、データとテンプレートをバインドします。最後に、生成されたHTMLコードを、IDがcontainerの要素に挿入します。

上記の方法により、レイアウトの中でデータバインディングを実現できます。

bannerAds