APP_Devices

設備清單

只需要以處理資料物件模型為核心的設計方式思考，利用 Vue 的 v-for 即可將物件陣列依序代入範本。

在 ONSEN UI 中 ons-list-item 指的是像左圖一個一個項目的樣式，在這裡我們先不實作樣式，先利用 {{ device }} 將整個資料物件列出了解一下其運作原理。

<ons-list-item modifier="chevron tappable" class="plan" v-for="device in devices">

    {{ device }}

</ons-list-item>

const mainPage = {

  template: '#mainPage',

  props: ['pageStack'],

  data(){

    return { devices: myDevices.devices };

};

我們只需要將由 WFCloud 回來的設備清單 myDevices.devices 直接回傳給 v-for 使用即可完成。

<ons-list-item modifier="chevron tappable" class="plan" v-for="device in devices">

<ons-row>

<ons-col width="80px" class="plan-left">

<div class="plan-date"><span v-bind:class="{label:true, online:device.online, offline:!device.online}">{{ device.key }}</span></div>

<div class="plan-duration">{{ device.product}}</div>

</ons-col>

<ons-col width="2px" class="plan-center" v-bind:style="{backgroundColor: device.online == 1 ? '#3399ff' : '#ccc'}">

</ons-col>

<ons-col class="plan-right">

<div class="plan-name">{{ device.name}}</div>

<div class="plan-info">

<div>

<ons-icon class="plan-icon" icon="fa-phone"></ons-icon>{{ device.config }}

</div>

</div>

</ons-col>

</ons-row>

</ons-list-item>

watchAll 只要設備有任何異動就會收到更新。因此可以來檢查設備是否上線。

CONFIG 是 REST MQTT 中的一個命令，API 請看這裡。CONFIG 會列出所有你設備好要回傳的設備資料。例如：開關狀態溫濕度風向電力等等。

function bindDeviceEvent(){

    wf8266r.watchAll(function(data){

    myDevices.devices[data.index].online = true;

    if(data.type == "CONFIG")

      myDevices.devices[data.index].config = data;

})

Google Sites

Report abuse