數據綁定多個文本框在一個文本框中

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/