Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text

深藏阁楼爱情的钟 2023-10-16 19:24 27阅读 0赞

Text绑定可以使用ViewModel来设置DOM元素的文本属性，如果需要设置input,textarea,或select的显示，需要使用value属性。

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">2</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;</code><code style="">script</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">var viewModel = kendo.observable({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">7</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">kendo.bind($("span"), viewModel);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">8</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/</code><code style="">script</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

本例输出：

John Doe

如果ViewModel的值包含html标记，这些标记会直接显示出html标记，比如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">name: "&lt;</code><code style="">strong</code><code style="">&gt;John Doe&lt;/</code><code style="">strong</code><code style="">&gt;"</code></td> 
  </tr> 
 </tbody> 
</table>

[![20130818003][]][20130818003]

如果需要以粗体显示，则可以使用前面介绍的[html][]绑定。

[20130818003]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/08/20130818003.png
[html]: http://www.imobilebbs.com/wordpress/archives/4652