Truyền dữ liệu vào cho template như thế nào nhỉ?

Khi cần tạo 1 template để hiển thị danh sách các tùy chọn cho bottom-sheet với dữ liệu động, thi truyền vào như thế nào nhỉ?

Với làm sao để nhận được giá trị người dùng đã chọn từ 1 list có trong Template nhỉ?

Hi @Tuan_Ngo ,
Ở đây bạn có 2 câu hỏi:

  1. HIển thị danh sách động cho bottom sheet sử dụng template.
    → Template có thể sử dụng data được truyền từ ngoài vào. Bạn tham khảo ở đây nhé
    Template | Tini App
  2. Với làm sao để nhận được giá trị người dùng đã chọn từ 1 list có trong Template nhỉ?
    → Action trong template được bind vào trong page js của page import. Ví dụ:
    nếu trong template bạn sử dụng thì bạn tham khảo tài liệu
    picker-view | Tini App
    Trong template txml <picker-view onChange="onPickerChange"> bạn có thể handle trực tiếp hàm onPickerChange trong logic của page js
onPickerChange(e) {
  console.log(e.detail.value);
  this.setData({
    value: e.detail.value
  });
}

Tương tự với list, hoặc bất cứ view nào trong template.
Bạn thử lại rồi có gì báo mình hỗ trợ tiếp nhé.

@hanhan hướng dẫn giúp mình cái nhé:


<template name="bottom-sheet-list" data="{{...provinces}}">  
  <radio-group>
    <label tiki:for="{{provinces}}">
      <list-item padding>
        <view slot="prefix" class="list-item-prefix">
          <radio onChange="onListChange" value="{{item.slug}}" />
        </view>
        <view class=" list-item-title">{{item.name}}
        </view>        
      </list-item>
    </label>
  </radio-group>
</template>

Component({  
  data:{
    provinces: [
      {
        slug: 'hcm',
        name: 'Ho Chi Minh'
      }
    ]
	}
})

===
Đã thử mấy cách truyền vào mà chưa lên được dữ liệu. Thanks!

Hi @Tuan_Ngo

Để sử dụng template, bạn cần có 2 phần

1/ Định nghĩa template
Ở trong code bạn gửi, mới chỉ có phần định nghĩa template mà thôi

2/ Sử dụng template
Khi muốn xài một template, bạn cần truyền 2 tham số

  • is là tên template bạn định nghĩa ở bước 1
  • data là data mà bạn sẽ truyền vào template ở bước 1

Bạn tham khảo Template | Tini App
để nắm rõ thêm nhé

Nếu chưa rõ, bạn có thể gửi nguyên cả file .txml và .js lên bọn mình sẽ help chi tiết hơn

1 Like

Tôi đã hiển thị lên được danh sách cho template.

Nhưng chưa lấy được giá trị mà người dùng đã chọn từ danh sách hiển thị.

Code:
*.txml


<!-- template -->
<template name="bottom-sheet-list">    
  <radio-group>
    <label tiki:for="{{items}}">
      <list-item padding>
        <view slot="prefix" class="list-item-prefix">          
          <radio value="{{item.slug}}" />
        </view>
        <view class=" list-item-title">{{item.name}}
        </view>        
      </list-item>
    </label>
  </radio-group>
</template>

<view class="divider" />

<text>Bạn địa chỉ bạn muốn giao hàng</text>
<view class="select-area xto-cover">
  <view class="table">
    <view class="row">
      <view class="td">
        <text>Tình thành:</text>
        <view class="space-h-5" />
        <tu-button size="medium" shape="rounded" data-type="province" type="outline" onTap="onShowBottomSheetList">{{province.name}}</tu-button>  
      </view>
      <view class="td">
      <text>Quận / huyện:</text>
      <view class="space-h-5" />
      <tu-button size="medium" data-type="district"  shape="rounded"  type="outline" onTap="onShowBottomSheetList">{{district.name}}</tu-button>  
      </view>  
    </view>
  </view>
</view>

<block tiki:if="{{show}}">
  <bottom-sheet value="{{[0, receiver.district_idx]}}" title="{{dialogTitle}}" buttonTitle="OK" distanceFromTop="{{100}}" onClose="onClose" onClick="onBottomSheetClick">
    <template is="bottom-sheet-list" data="{{items}}" />
  </bottom-sheet>
</block>

====
Vui lòng hướng dẫn cách lấy dữ liệu được chọn giúp tôi.

anh có comment mới nhất nhé! Hỗ trợ anh cái nha!

Hi @Tuan_Ngo

Code txml của bạn vẫn works nhé.
Bạn chú ý trong code của bạn, có lấy data items, thì ở page bạn phải set giá trị items này.

Cụ thể với code txml ở trên, ban set file index.js với giá trị như sau là chạy được nhé

Page({
  data: {
    show: true,
    items: [
      {
        slug: "slug1",
        name: "name1"
      },
      {
        slug: "slug2",
        name: "name2"
      },
      {
        slug: "slug3",
        name: "name3"
      },
    ],
  },
})