当前位置： 移动技术网 > IT编程>开发语言>.net > 【Web API系列教程】3.7 — 实战：处理数据（创建UI视图）

【Web API系列教程】3.7 — 实战：处理数据（创建UI视图）

2019年05月10日  | 移动技术网IT编程  | 我要评论

胜利车祸,小发明,三德商城

在本节，你将开始为app定义html，并在html和视图模型间添加数据绑定。

打开views/home/index.cshtml文件。用以下代码替换掉文件的所有内容。

<code class=" hljs xml">@section scripts {
  @scripts.render("~/bundles/app")
}

  </code>

bookservice

books

这里的绝大部分p元素都是bootstrap风格，它是有着数据绑定属性的重要元素。这个元素将html链接到视图模型中。

例如：

在这个示例中，“text”绑定会使得p元素显示在视图模型中error属性的值。error的回调被声明在ko.obserable中：

self.error = ko.observable();

无论何时一个新值被修改到error上，knockout都会在< p >元素上更新该文本。

而foreach绑定告诉knockout在books数组中循环遍历。对于该数组的每一项，knockout会创建一个新的< li >元素。绑定foreach引用的上下文到数组的每一项。例如：



这里有一个text绑定读取每一个book的author属性。


如果你现在运行该应用程序，它看起来会是这样：


这里写图片描述


在页面加载后，books列表会被异步的加载。现在，“details”链接还不具备功能。我们将在下一节为其添加此功能。

						

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网