gpt4 book ai didi

javascript - asp.net ajax 4.0客户端模板,如何绑定(bind)一个select?

转载 作者:行者123 更新时间:2023-11-29 10:54:59 27 4
gpt4 key购买 nike

我正在尝试创建一个简单的 ajax 网格,它允许我添加和删除行,还可以编辑一些列,并让其他列直接根据其他列的输入进行计算。我认为这将是一个使用 asp.net ajax 4.0 和客户端模板的好机会。它工作得很好,但我似乎无法找到一种方法将我的 json 数据绑定(bind)到 .我该怎么做?

一个普通的模板是这样的

<div id="authorsTemplate" style="visibility:hidden;display:none;"> 
<ul>
<li>First Name: {{ FirstName }}</li>
<li>Last Name: {{LastName}}</li>
<li>Url: <a href="{{Url}}">{{Url}}</a></li>
</ul>
</div>

我将如何使用带有下拉列表的数据绑定(bind)语法

<select id="">
<option value="1">1</option>
<option value="2">2</option>
</select>

编辑:如果 select 标签有一个 value 属性,那么显而易见的解决方案就是。编辑2:下面的语法实际上是解决方案,Thx Roatin,我不知道 select 实际上有一个 value 属性。

<select id="" value="{binding nr}">
<option value="1">1</option>
<option value="2">2</option>
</select>

我也许可以使用自定义 javascript 来设置所选选项,但重点是实时绑定(bind)到我的 json 对象,就像绑定(bind)到输入标签的值一样

最佳答案

I do not want to populate the dropdown, it is already populated. I want to be able to use the client template binding syntax to get the value from my json object and set the selected element.

事实上,select DOM 元素确实有一个value属性(但不作为标记中的属性公开)。设置它相当于(并且比)迭代 child <option> s 并设置 selectedIndex找到具有匹配 value 的选项的选项索引.

无论如何,下面是如何使用 Sys.Binding 直接绑定(bind)到它(完整的测试用例):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">.sys-template {display:none}</style>
<script src="MicrosoftAjax.debug.js"></script>
<script src="MicrosoftAjaxTemplates.debug.js"></script>

<script type="text/javascript">
var dataItem = { Foo: '3' };
function pageLoad()
{
$create(Sys.Binding, {
target: $get("list"),
targetProperty: 'value',
source: dataItem,
path: 'Foo',
mode: Sys.BindingMode.twoWay
});
}
</script>
</head>
<body>
<select id="list">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</body>
</html>

如果您愿意,这里是如何以声明方式做同样的事情:

<body xmlns:sys="javascript:Sys"
xmlns:binding="javascript:Sys.Binding"
sys:activate="*">

<select id="list"
sys:attach="binding"
binding:target="{{ $get('list') }}"
binding:targetproperty="value"
binding:source="{{ dataItem }}"
binding:path="Foo">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

(当然还有去掉 pageLoad JavaScript 的东西...)

两个示例都设置了到 dataItem 的双向绑定(bind)目的。您可以看到页面何时加载,第三个 <option>被选中,因为这是一个值与 dataItem.Foo 匹配的选项.当您从下拉列表中选择不同的项目时,dataItem.Foo使用所选的新值进行更新。

希望对您有所帮助!

关于javascript - asp.net ajax 4.0客户端模板,如何绑定(bind)一个select?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1500942/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com