[英]data-bind multiple text boxes to display in one text box
I'm using a Kendo edit box that a user can enter the different parts of a SQL connection string (server name, database, user name and password). 我使用的是Kendo编辑框,用户可以输入SQL连接字符串的不同部分(服务器名称,数据库,用户名和密码)。 I also have a text box that will show the user the entire connection string as they type. 我还有一个文本框,将在用户键入时向用户显示整个连接字符串。
My question is how can I data-bind each of the four text boxes (server, database, user and password) to one text box as the user enters data into each one. 我的问题是,当用户向每个文本框输入数据时,如何将四个文本框(服务器,数据库,用户和密码)的每个数据绑定到一个文本框。
Also, the user requested seperate fields. 此外,用户要求使用单独的字段。
Thanks in advance, Dan Plocica 在此先感谢Dan Plocica
Doing it using Kendo UI would be: 使用Kendo UI可以做到:
HTML: 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: 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);
});
In the HTML there are two parts: 在HTML中有两个部分:
div
where I found its text to connection
function in my model that creates a string from the different values. 一个div
,我在模型中的connection
函数中找到其文本,该函数根据不同的值创建一个字符串。 This is automatically updated and you can freely edit each input. 它会自动更新,您可以自由编辑每个输入。
You might decorate the input
as I did setting it's CSS class to k-textbox
, that's optional. 您可以像我将CSS类设置为k-textbox
那样装饰input
,这是可选的。 The only important thing is the data-bind="value : ..."
. 唯一重要的是data-bind="value : ..."
。
The JavaScript, is just create and Observable
object with the fields and methods that we want. JavaScript只是带有所需字段和方法的创建和Observable
对象。
Running example here: http://jsfiddle.net/OnaBai/xjNMf/ 在此处运行示例: http : //jsfiddle.net/OnaBai/xjNMf/
I will write solution using jQuery JavaScript library, and you should use jQuery because its much easier and easier to read and also to avoid errors in different browsers. 我将使用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 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.