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路数据绑定，不是框架

回答

相关问题