在 Javascript 中耦合视图和控制器

Question

首先我有一个关于耦合两个输入元素的非常基本的问题。在我的例子中，它是一个 Slider 和一个输入元素：

<div class="userInput">
    <input id="slider" type="range" min="0" max="100"/>
    <input id="number" type="number" max="100"/>
</div>

js:

$('#slider').corresponding = $('#number');
$('#number').corresponding = $('#slider');
$('#slider').onchange(function(){this.corresponding.value = this.value;});
$('#number').onchange(function(){this.corresponding.value = this.value;});

所以这对我有用，但在我看来也像是一个肮脏的黑客，扩展了 jQuery 对象。将控制器附加到 jQuery 对象时，这种不好的感觉甚至会增加：

var MYController = new Controller();
$('#slider').controller = MYController;
$('#slider').onchange(function(){
    this.corresponding.value = this.value; 
    this.controller.sliderChange(this.value);
});

如果有任何建议如何“正确”完成，我将不胜感激。我还没有找到更好的方法，因为我有大量且不断变化的用户输入，每个都需要自己的控制器对象，保存在我的 Mastercontroller 类的数组中。

Answer 1

也许您可以将所有输入放在jsp中的<form></form>标签内，然后调用表单提交事件或序列化事件。使用后者（序列化存储在按钮上的任何值都不会被存储，并且它还需要 jsp 标签中的 name 属性，因此提交可能是一个更好的选择）。

//jsp page
<form id="myForm" >
<input type="text" value="Enter here">
<input type="submit" value="Submit">
</form>

//js call
( "#myForm" ).submit(function( event ) {
// call the controller
});