当前位置: 代码迷 >> 综合 >> kendo 数据绑定:data-bind
  详细解决方案

kendo 数据绑定:data-bind

热度:77   发布时间:2023-12-15 23:41:00.0

kendo中的数据绑定data-bind跟Angularjs中的ng-model类似。Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ,这些属性可以绑定到 DOM 元素或是 Kendo UI 组件的属性。

(1)html:data-bind= “html:name”改变name的值,页面当中的数据也会随之发生改变。

<span data-bind="html: name"></span>
<script>var viewModel = kendo.observable({name: "John "});kendo.bind($("span"), viewModel); </script>

输出:John .

如果 ViewModel 的值包含 HTML 标记,这些标记会作为最后结果显示出来,比如:

<span data-bind="html: name"></span>
<script>var viewModel = kendo.observable({name: "<strong>John</strong>"});kendo.bind($("span"), viewModel); </script>

输出:John

(2)text:data-text=“html :name”若是name当中出现标签,也会被渲染到页面当中;
Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使用 value 属性。

<span data-bind="text: name"></span>
<script> var viewModel = kendo.observable({name: "<strong>John Doe</strong>" });kendo.bind($("span"), viewModel); </script>

输出:<strong>John Doe</strong>

(3)source
Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素也随之发生变化。模板由属性 data-template 指定,它的值为某个 script 定义的模板的 id. 如果没有指明模板,则根据元素的标记使用缺省的模版。

Source 绑定到数组

*当 ViewModel 的值 为一数组时,那么通过 Source 绑定到模板时,会把数组中每个元素逐个应用到模板,最后的输出为应用这些模板的结果的综合。 添加删除数组中的内容,显示的内容也随之变化。
注:绑定到 ViewModel 数组时,Source 指明的为单个元素名称,例如:*

<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template"><li>id: <span data-bind="text: id"></span>name: <span data-bind="text: name"></span></li>
</script>
<script>
var viewModel = kendo.observable({products: [{ id: 1, name: "Coffee" },{ id: 2, name: "Tea" },{ id: 3, name: "Juice" }]
});
kendo.bind($("ul"), viewModel);
</script>

输出:
id: 1 name: Coffee
id: 2 name: Tea
id: 3 name: Juice

如果 ViewModel 绑定的数组的内容为简单类型(如数字,字符串,日期),这时在模板中需要使用 ”this” 关键字来引用当前数组项:

<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template"><li data-bind="text: this"></li> </script>
<script> var viewModel = kendo.observable({products: [ "Coffee", "Tea", "Juice" ] });kendo.bind($("ul"), viewModel); </script>

输出:
Coffee
Tea
Juice

Source绑定到非数组

source 绑定也支持绑定到非数组值,此时在模板中引用到 ViewModel 的某个属性,最终的结果为模板使用 ViewModel 后的结果。

<div data-template="div-template" data-bind="source: person"><script id="div-template" type="text/x-kendo-template"><span data-bind="text: name"></span></script>
</div>
<script> var viewModel = kendo.observable({person: {name: "linda"} });kendo.bind($("div"), viewModel); </script>

输出: linda.

也可以直接绑定到 ViewModel 对象本身,此时可以使用把 source 的值设置为 “this” ,例如:

<div data-template="div-template" data-bind="source: this"><script id="div-template" type="text/x-kendo-template"><span data-bind="text: name"></span></script>
</div>
<script> var viewModel = kendo.observable({name: "linda" });kendo.bind($("div"), viewModel); </script>

结果和上边一样。

Source 绑定 Select 元素

当数组绑定到 select 元素时,就创建多个 option 元素

<select data-bind="source: colors"></select>
<script> var viewModel = kendo.observable({colors: [ "Red", "Green", "Blue" ] });kendo.bind($("select"), viewModel); </script>

输出的 HTML 元素如下:

<select><option>Red</option><option>Green</option><option>Blue</option>
</select>

select 元素也可以绑定到 JavaScript 对象数组(非简单类型),此时可以同时指定 data-text-field,data-value-field 用来指定 option 元素的 value 和 text 属性,例如:

<select data-text-field="name" data-value-field="id"data-bind="source: products"></select>
<script>
var viewModel = kendo.observable({products: [{ id: 1, name: "Coffee" },{ id: 2, name: "Tea" },{ id: 3, name: "Juice" }] });kendo.bind($("select"), viewModel); </script>

输出如下:

<select><option value="1">Coffee</option><option value="2">Tea</option><option value="3">Juice</option>
</select>
  相关解决方案