Javascript 2路數據綁定，不是框架

我只是想了解純JavaScript中的數據綁定。當我創建一個輸入並附加一個事件監聽器（如「輸入」），然後調用一個函數以用該新輸入值替換div的innerHTML時，div會在我輸入時鏡像輸入框。Javascript 2路數據綁定，不是框架

我試圖讓輸入框的值在沒有人打字的情況下更改時更新div。因此，如果輸入的是因爲一些代碼來改變：

inp.value = 'Testing'

，而不是它裏面有人直接打字，我想在格中的文本仍然鏡像。

我試着用'change'事件監聽器，但只有當輸入框丟失焦點時才起作用。所以我嘗試在代碼中加入：

inp.focus(); 
inp.value = 'Testing'; 
inp.blur();

但是這也行不通。
這裏是我的jsfiddle鏈接： https://jsfiddle.net/mmpal78/7g0vqwgh/1/

我猜一定有辦法做到這一點。謝謝。

來源

2016-10-01 DGwang

只需調用'InputEvent的（） ;'在你的'test1'函數中... https://jsfiddle.net/7g0vqwgh/3/ – NewToJS

因此，如果輸入的是因爲一些代碼來改變：
inp.value = 'Testing' 
，而不是它裏面有人直接打字，我想在格中的文本仍然鏡像。

你不能做到這一點，就當value設置這種方式，也將在MutationObserver看到什麼報告沒有引發的事件。

取而代之的是，你要麼

不允許直接訪問（只是作爲一個政策的事），並都通過設置你的框架去（再有你的架構更新受value改變任何東西）。 KO通過讓你通過它的「可勝任」來做到這一點。或者，
根據您認爲適當的時間進行更新，例如每當您完成處理事件時，可能通過存儲您已處理的最新值value，然後根據當前的value進行檢查。 Angular 1做了那樣的事情。或者，
明確更新任何您知道受value影響的代碼修改value（但這並不規模，您將將忘記做它）。

來源

2016-10-01 13:34:42

只有解決這個問題的方法是在通過源代碼更改值之後調用'inputEvent（）;' – NewToJS

@NewToJS：這會更新div，但在這一點上它幾乎沒有雙向綁定。你只是改變價值，然後明確地去掉並更新div。 –

啊，是的，我明白你的意思了。我看着這個問題太簡單了，想到了一個簡單的解決方案，而不是深入研究。 – NewToJS

我想我有點晚，但無論如何我發表了答案。

首先，您要做的不是雙向數據綁定，雙向數據綁定是如果您更改變量值，則元素的值會更改，反之亦然。

我建議你使用一個結構，以便你可以在任何你喜歡的地方使用它，這有點複雜，但看看這個簡單的例子，具體到你想要做什麼，你可以用一點時間來擴展：DEMO

首先你創建你的構造函數：你的構造create，bind，set和get的

var variable=function(){ 
    this.variables={}; 
}

然後創建原型（方法）來創建一個新變種iable，將其綁定到一個元素，設置或更改變量的值，並最終得到了變量的值：

variable.prototype.create=function(name){ 
    this.variables[name]={ 
    elem:'', 
    value:'', 
    event:new Event(name+'Change') 
    }; 
} 
variable.prototype.bind=function(name,element){ 
    this.variables[name].elem=document.querySelector(element); 
} 
variable.prototype.set=function(name,val){ 
    this.variables[name].value=val; 
    this.variables[name].elem.dispatchEvent(this.variables[name].event); 
} 
variable.prototype.get=function(name){ 
    return this.variables[name].value; 
}

那麼您創建結構的一個實例：

var binding=new variable();

創建變量，並將其綁定到輸入元素：

binding.create('myVar'); 
binding.bind('myVar','.input');

然後設置一個事件偵聽器的價值在你輸入的變化：

document.querySelector('.input').addEventListener('myVarChange',function(){ 
    this.value=binding.get('myVar'); 
    document.querySelector('#div1').innerHTML=binding.get('myVar'); 
});

那麼如果用戶輸入任何文字，我們將其設置爲可變：

document.querySelector('.input').addEventListener('input',function(){ 
    binding.set('myVar',this.value); 
});

，並最終改變按鈕的點擊變量的值：

document.querySelector('#btn1').addEventListener('click',function(){ 
    binding.set('myVar','test'); 
});

來源

2016-10-01 14:30:01

Javascript 2路數據綁定，不是框架

回答

相關問題