数据绑定多个文本框在一个文本框中

Question

我使用的是剑道编辑框，用户可以输入SQL连接字符串的不同部分（服务器名称，数据库，用户名和密码）显示。我还有一个文本框，可以在用户输入时显示整个连接字符串。

我的问题是我怎么能数据绑定每个四个文本框（服务器，数据库，用户名和密码）到一个文本框在用户输入数据到每个之一。

此外，用户请求单独的字段。

由于提前， 丹Plocica

Answer 1

我会使用jQuery JavaScript库写的解决方案，因为你应该使用jQuery它更容易和更易于阅读，也避免在不同浏览器的错误。

**HTML** 
Server: <input type="text" id="server"/><br/> 
Database: <input type="text" id="database"/><br/> 
Username: <input type="text" id="username"/><br/> 
Password: <input type="text" id="password"/><br/> 
<br/> 
Full CS: <input type="text" id="solution"/><br/> 

JS

<script type="text/javascript"> 
    var _template = 'Data Source=%server%;Initial Catalog=%db%;Persist Security Info=True;User ID=%user%;Password=%pass%'; 

    $(document).ready(function(){ 
     $('#server,#database,#username,#password').keyup(function(){ updateSolution();}); 

    }); 
    function updateSolution(){ 
     var _t = _template.replace('%server%', $('#server').val()).replace('%db%', $('#database').val()).replace('%username%', $('#username').val()).replace('%pass%', $('#password').val()); 

     $('#solution').val(_t); 
    }; 
</script> 

Answer 2

使用剑道UI会做它：

HTML：

<div id="form"> 
    <label>Server : <input type="text" class="k-textbox" data-bind="value: server"></label><br/> 
    <label>Database : <input type="text" class="k-textbox" data-bind="value: db"></label><br/> 
    <label>User : <input type="text" class="k-textbox" data-bind="value: user"></label><br/> 
    <label>Password : <input type="password" class="k-textbox" data-bind="value: password"></label><br/> 

    <div id="connections" data-bind="text: connection"></div> 
</div> 

的JavaScript：

$(document).ready(function() { 
    var model = kendo.observable({ 
     server : "localhost:1521", 
     db  : "database", 
     user  : "scott", 
     password : "tiger", 
     connection: function() { 
      return this.get("user") + "/" + 
        this.get("password") + "@" + 
        this.get("server") + ":" + 
        this.get("db"); 
     } 
    }); 
    kendo.bind($("#form"), model); 
}); 

在HTML有两个部分组成：

1. ，我定义的每个输入端的输入文件到哪个领域它在我的模型绑定。
2. 一个div在那里我找到了自己的文字在我的模型connection功能创建从不同值的字符串。

这是自动更新，您可以自由编辑每个输入。

你可以装点input像我一样设置它的CSS类k-textbox，这是可选的。唯一重要的是data-bind="value : ..."。

中的JavaScript，只是创建和我们需要的字段和方法Observable对象。

运行例如这里：http://jsfiddle.net/OnaBai/xjNMf/