FineUI + Knockout 实现数据绑定

棕榈

FineUI + Knockout 实现数据绑定




knockout 是 MVVM模式的JS实现，文档 https://knockoutjs.com/documentation/introduction.html


由于 knockout 数据绑定是在DOM上的，而 FineUI 的控件都是通过JS创建的，并且控件都有自己的DOM结构，无法直接使用 knockout 进行数据绑定，这里可通过创建自定义数据绑定来实现。



我已对 FineUI 控件的常用方法及事件进行了数据绑定的封装，如下面就是控件的数据绑定定义：

1. <f:TextBox Label="姓" AttributeDataTag="f:{text:surname}"></f:TextBox>
   
2. <f:TextBox Label="名" AttributeDataTag="f:{text:name}"></f:TextBox>
   
3. <f:Label Label="姓名" Text="<span data-bind='text:fullname'></span>" EncodeText="false"></f:Label>

复制代码

这是 ViewModel 代码：

1. function ViewModel() {
   
2.         var self = this;
   
3.         self.surname = ko.observable('李');
   
4.         self.name = ko.observable('某某');
   
5.         self.fullname = ko.pureComputed(function () {
   
6.                 return self.surname() + self.name();
   
7.         });
   
8. };

复制代码

f 为数据绑定的名称，可以通过 f:{text:name} ，将 name 绑定到 text 属性上，这里的 text 属性对应 FineUI 控件中 setText 方法，当然也可以写成 f:{setText:name}，但这样不够简单直观，所以这里做了一些封装，首先会检测当前属性在 FineUI 控件中是否有对应的方法，如果有则直接采用，如果没有，加上set后再次检测是否含有，这样就可以直接使用 text 而不必使用 setText，相关的方法有很多，如：

1. setDisabled
   
2. setEditable
   
3. setEmptyText
   
4. setEnabled
   
5. setFieldLabel
   
6. setHeight
   
7. setHidden
   
8. setMaxLength
   
9. setMinLength
   
10. setReadonly
    
11. setRedStar
    
12. setRegex
    
13. setRegexPattern
    
14. setRequired
    
15. setSize
    
16. setText
    
17. setTooltip
    
18. setValue
    
19. setVisible
    
20. setWidth

复制代码

都可以直接将 set 去掉，直接使用后面的名称，如 tooltip 等，这里要注意，对于方法需要传递两个参数的，只能传递第一个参数，对于多个参数只能通过FineUI提供的api进行调用。

事件直接使用FineUI控件提供的事件名称，如 click , 可以直接写 f:{click:save}，save为ViewModel中的方法，这里还要注意一下，由于FineUI控件中的方法名与事件名有相同的，如click,hide,show，这里都将示为事件名。


下面为示例中的代码：

1. @page
   
2. @model FineUICore.EmptyProject.RazorPages.Pages.HelloModel
   
3. @{
   
4.     ViewBag.Title = "Hello";
   
5.     var F = @Html.F();
   
6. }
   
7. 
   
8. @section head {
   
9.     <link href="~/bootstrap-4.4.1/css/bootstrap.css" rel="stylesheet" type="text/css" />
   
10. }
    
11. 
    
12. @section body {
    
13. 
    
14.     <div class="input-group mb-3">
    
15.         <div class="input-group-prepend">
    
16.             <span class="input-group-text" id="basic-addon1">@@</span>
    
17.         </div>
    
18.         <input type="text" class="form-control" data-bind="value:textbox,valueUpdate:'input'" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    
19.     </div>
    
20. 
    
21.     <div class="progress">
    
22.         <div class="progress-bar" data-bind="style:{width:progress()+'%'},text:progress()+'%'" role="progressbar"></div>
    
23.     </div>
    
24. 
    
25.     <f:Panel Layout="Anchor" Title="bootstrap 文本框" Width="350" BodyPadding="20">
    
26.         <Items>
    
27.             <f:Panel ShowBorder="false" ShowHeader="false" ContentEl=".input-group"></f:Panel>
    
28.             <f:TextBox AttributeDataTag="f:{text:textbox}"></f:TextBox>
    
29.         </Items>
    
30.     </f:Panel>
    
31. 
    
32.     <br />
    
33. 
    
34.     <f:Panel Layout="Anchor" Title="bootstrap 进行条" Width="350" BodyPadding="20">
    
35.         <Items>
    
36.             <f:Panel ShowBorder="false" ShowHeader="false" ContentEl=".progress" CssStyle="margin-bottom:10px"></f:Panel>
    
37.             <f:NumberBox AttributeDataTag="f:{value:progress}"></f:NumberBox>
    
38.         </Items>
    
39.     </f:Panel>
    
40. 
    
41.     <br />
    
42. 
    
43.     <f:Panel Layout="Anchor" Title="姓名" Width="350" BodyPadding="20">
    
44.         <Items>
    
45.             <f:TextBox Label="姓" AttributeDataTag="f:{text:surname}"></f:TextBox>
    
46.             <f:TextBox Label="名" AttributeDataTag="f:{text:name}"></f:TextBox>
    
47.             <f:Label Label="姓名" Text="<span data-bind='text:fullname'></span>" EncodeText="false"></f:Label>
    
48.         </Items>
    
49.     </f:Panel>
    
50. 
    
51.     <br />
    
52. 
    
53.     <f:Panel Layout="HBox" Title="两数相乘" Width="350" BodyPadding="20">
    
54.         <Items>
    
55.             <f:NumberBox AttributeDataTag="f:{value:value1}" BoxFlex="1"></f:NumberBox>
    
56.             <f:Label Text="*" Margin="0 10 0 10"></f:Label>
    
57.             <f:NumberBox AttributeDataTag="f:{value:value2}" BoxFlex="1"></f:NumberBox>
    
58.             <f:Label Text="=" Margin="0 10 0 10"></f:Label>
    
59.             <f:NumberBox Readonly="true" AttributeDataTag="f:{value:value1()*value2()}" BoxFlex="1"></f:NumberBox>
    
60.         </Items>
    
61.     </f:Panel>
    
62. 
    
63.     <br />
    
64. 
    
65.     <f:Panel Layout="Anchor" Title="联系人地址" Width="350" BodyPadding="20">
    
66.         <Items>
    
67.             <f:CheckBox ID="cbxSameAsContactAddress" Text="启用联系人地址" AttributeDataTag="f:{value:enableAddress}"></f:CheckBox>
    
68.             <f:TextBox ID="tbxBillingAddress" Label="详细地址" AttributeDataTag="f:{enabled:enableAddress}"></f:TextBox>
    
69.             <f:Panel ID="Panel3" Layout="VBox" BoxConfigAlign="Stretch" ShowHeader="false" ShowBorder="false">
    
70.                 <Items>
    
71.                     <f:TextBox ID="tbxBillingProvince" Label="省" AttributeDataTag="f:{enabled:enableAddress}"></f:TextBox>
    
72.                     <f:TextBox ID="tbxBillingCity" Label="市" AttributeDataTag="f:{enabled:enableAddress}"></f:TextBox>
    
73.                     <f:TextBox ID="tbxBillingPostCode" Label="邮政编码" AttributeDataTag="f:{enabled:enableAddress}"></f:TextBox>
    
74.                 </Items>
    
75.             </f:Panel>
    
76.         </Items>
    
77.     </f:Panel>
    
78. }
    
79. 
    
80. @section script {
    
81.     <script src="~/bootstrap-4.4.1/js/bootstrap.bundle.js"></script>
    
82.     <script src="~/knockout-3.5.1/knockout.js"></script>
    
83.     <script src="~/res/js/knockout-fineui.js"></script>
    
84. 
    
85.     <script>
    
86.         F.ready(function () {
    
87.             $('[data-tag]').each(function () {
    
88.                 $(this).attr('data-bind', $(this).data('tag'));
    
89.             });
    
90. 
    
91.             function ViewModel() {
    
92.                 var self = this;
    
93.                 self.surname = ko.observable('李');
    
94.                 self.name = ko.observable('某某');
    
95.                 self.fullname = ko.pureComputed(function () {
    
96.                     return self.surname() + self.name();
    
97.                 });
    
98. 
    
99.                 value1 = ko.observable(20);
    
100.                 value2 = ko.observable(5);
     
101. 
     
102.                 textbox = ko.observable('bootstrap');
     
103.                 progress = ko.observable(40);
     
104. 
     
105.                 enableAddress = ko.observable(false);
     
106.             };
     
107. 
     
108.             ko.applyBindings(new ViewModel());
     
109.         });
     
110.     </script>
     
111. }
     

复制代码

关于示例代码，这里简单说一下，由于 FineUI 中没有直接提供 data-bind 的属性，这里借用了 AttributeDataTag 属性，并在 FineUI 控件初始化完成后，将 data-tag 中的值复制到 data-bind 中，代码：

1. $('[data-tag]').each(function () {
   
2.         $(this).attr('data-bind', $(this).data('tag'));
   
3. });

复制代码

希望三石兄提供一个 AttributeDataBind 属性，这样就可以直接使用，而不必借用 AttributeDataTag 属性。


示例项目文件及 knockout-fineui.js 请到知识星球下载。

sanshi

赞，一个很好的尝试