我如何在 javascript 中創建一個完全動態的數據綁定

Question

我的目標是實現類似於.NETs BindingList 的東西。 為了簡單開始，我認為以“BindingObject”開頭會簡單得多。

每當我的對象的屬性被更改/創建/刪除時，我想拋出一個事件或調用一個函數。 最后，我希望能夠動態地對對象的每個屬性做出反應。

我已經閱讀了幾篇關於如何解決這個問題的文章。 大多數使用 JavaScript 代理的建議。

這是我現在嘗試過的：

var handler = {
    get: function (target, propname) {
        console.log('get');
        return target[propname];
    }};

BindingObject.prototype.constructor = new Proxy({}, handler);

function BindingObject(object) {
    //access handler here
}

當然，我希望為每個創建的對象都有一個處理程序，而不是每個對象都有一個相同的處理程序。 我也很想在構造函數中傳遞代理對象和處理程序，我也無法工作。

這是我的第二次嘗試，它允許在構造函數中傳遞我的對象，但我無法訪問我的處理程序：

class BindingObject2 {
    constructor(obj) {
        this.handler = {
            get: function (target, propname) {
                console.log('get');
                return target[propname];
            }};
        return new Proxy(obj || {}, this.handler);
    }
}

Answer 1

基於類的方法不能滿足 OP 的所有要求。 提供的示例代碼已經使這一點顯而易見。 有一個構造函數創建一個帶有handler屬性的類型但不返回它，而是返回一個代理對象。

一個好的舊工廠功能可能是更好的選擇......

 function createComposedProxyType(trapHandlerOptions, type) { var proxy = new Proxy((type || {}), trapHandlerOptions); proxy.__traps__ = trapHandlerOptions; return proxy; } function handlePropertyChange(target, key, value/*, receiver*/) { console.log("handlePropertyChange :: [key, value] :", key, value); target[key] = value; return true; } var trapConfig = { set: handlePropertyChange }; var type = createComposedProxyType(trapConfig); console.log('type : ', type); type.foo = 'foo'; type.bar = 'bar'; console.log('type : ', type);

 .as-console-wrapper { max-height: 100%!important; top: 0; }

Answer 2

在 JS 中只使用數據綁定是有問題的。 它可能是流行框架的一部分：angular、aurelia 或 react（有點……+redux 即將消亡）。

使用 jQuery，它需要手動連接所有道具更改。 可能實現一些觀察者/訂閱者方法。

或者使用一些組件進行數據綁定任務，提供足夠方便的數據綁定定義命令。 我是用 databindjs 做到的。 例如

// Lets assume that there is just simple form (target)
var simpleForm = {
   input: $('.simple .input-value'),
   output: $('.simple .output-value')
};
// And here is the simple model object (source)
var model = {
    text: 'initial value'
};

// Lets set two directional binding between [input] <-> [text]
var simpleBinding = bindTo(simpleForm, () => model, {
    'input.val': 'text',  // bind to user input
    'output.text': 'text'  // simple region that will react on user input
});
// This command will sync values from source to target (from model to view)
updateLayout(simpleBinding);
subscribeToChange(simpleBinding, () => {
    $('.simple .console').html(JSON.stringify(model));
});
// Just initialize console from default model state
$('.simple .console').html(JSON.stringify(model));

完整的解決方案在這里。 您可以在 github 上查看數據綁定核心的完整實現