如何使用javascript將數據綁定到多個元素

Question

我需要使用 JSON 對象在多個地方實現單向數據綁定。 下面是每 10 秒從服務器獲取的 JSON 對象，以及用戶的最新狀態。

<html>
<head></head>
<body>
<ul>
  <li>User0: <span class="change_status" unique_id="7150032">Busy</span></li>
  <li>User1: <span class="change_status" unique_id="7150031">Offline</span></li>
  <li>User2: <span class="change_status" unique_id="7150030">Online</span></li>
</ul>
<div class="profile">
  <div class="profileimage">
  U
  </div>
  Status: <span class="change_status" unique_id="7150032">Busy</span>
</div>

<script>
function Binding(b) {
    _this = this
    this.elementBindings = []
    this.value = b.object['unique_id']
    this.valueGetter = function(){
        return _this.value;
    }
    this.valueSetter = function(val){
        _this.value = val
        for (var i = 0; i < _this.elementBindings.length; i++) {
            var binding=_this.elementBindings[i]
            binding.element[binding.attribute] = val
        }
    }
    this.addBinding = function(element, unique_id){
        var binding = {
            element: element,
            unique_id: unique_id
        }

        this.elementBindings.push(binding)
        element['innerText'] = _this.value
        return _this
    }

    Object.defineProperty(b.object, b.property, {
        get: this.valueGetter,
        set: this.valueSetter
    }); 

    b.object[b.property] = this.value;
}

obj =  [
  {
    "unique_id": "7150032",
    "status_name": "Busy"
  },
  {
    "unique_id": "7150031",
    "status_name": "Offline"
  },
  {
    "unique_id": "7150030",
    "status_name": "Online",
  }
]

var changeStatusElements = document.getElementsByClassName("change_status")
var binding = new Binding({
    object: obj
  })
for(var i=0; i< changeStatusElements.length; i++){
    var unique_id = changeStatusElements[i]['unique_id']
  binding.addBinding(changeStatusElements[i], unique_id)
}
</script>
</body>
</html>

這些狀態將根據具有新狀態的新 JSON 更改。 請假設 JSON（包含用戶的實時狀態）將每 10 秒更改一次。

請更正我的代碼，我們將不勝感激。

Answer 1

給你的ul元素一個 id 屬性，這樣你就可以從代碼中引用它。 我假設它被稱為“容器”。 最初它應該只是一個空元素，比如

<ul id="container"></ul>

您還應該有一個 URL 來發出請求。 我假設你在一個變量url有它。

然后，您可以添加以下代碼：

(async function request() {
    let response = await fetch(url);
    let { data } = await response.json();
    document.querySelector("#container").innerHTML = data.map(({ unique_id, status_name }, i) =>
        `<li>User${i}: <span class="change_status" unique_id="${unique_id}">${status_name}</span></li>`).join("\n");
    setTimeout(request, 10000);
})();

Answer 2

我已經這樣做了。 請檢查以下代碼

function Binding(b) {
    _this = this
    this.statusArrProxy = b[b.property]
    this.statusGetter = function () {
        return _this.statusArrProxy;
    }
    this.statusSetter = function (arr) {
        _this.statusArrProxy = arr
        arr.forEach(a => {
            var elements = document.querySelectorAll('.change_status[' + b.key + '="' + a[b.key] + '"]')
            elements.forEach(node => node[b.attribute] = a[b.value])
        })
    }
    Object.defineProperty(b, b.property, {
        get: this.statusGetter,
        set: this.statusSetter
    })
    b[b.property] = this.statusArrProxy
}

var statusArray = [{ unique_id: 123, status: 'Busy' }, { unique_id: 1234, status: 'Available' }]
var bindingObj = {
    statusArray: statusArray,
    attribute: 'innerHTML',
    property: 'statusArray',
    key: 'unique_id',
    value: 'status'
}
new Binding(bindingObj)
//replace the entire array bindingObj.statusArray = [{ unique_id: 123, status: 'Offline' }, { unique_id: 1234, status: 'Out Of Office' }]

謝謝大家的支持

如何使用javascript將數據綁定到多個元素

問題描述

2 個解決方案

解決方案1
0 2019-12-18 08:29:05

解決方案2
-1 2019-12-18 14:09:22

如何使用javascript將數據綁定到多個元素

問題描述

2 個解決方案

解決方案1 0 2019-12-18 08:29:05

解決方案2 -1 2019-12-18 14:09:22

解決方案1
0 2019-12-18 08:29:05

解決方案2
-1 2019-12-18 14:09:22