基于jQuery的"Component" 定义( 推动 MVVM )

分享于 

21分钟阅读

Web开发

  繁體

介绍

xml - 组件定义是一个基于xml的javascript函数,它在使用 new word实例instantiates实例化javascript对象并在文档( 网页) 中定义并插入 ko -synchronized view。

不仅如此,组件定义必须能够单独使用,或者嵌套在其他组件的定义。 通过这种方式,我们将始终使用一个基于xml的组件定义,每页定义一个定义,但这将使用大量其他嵌套的组件( 如。

一个简单的网页,带有标签和

下图显示了我们将要获取的final 页面。

就像图像显示在调试器 chrome debugger你看到的页面代码基本上是一系列 javascript 脚本源文件列表( 其中包含不同的组件定义),并将 ko.applyBindings() 函数应用到一个组件的定义中的实例。

下图向你展示了这个网页是如何与定义的组件的。

就像你从图像视图中看到的,组件的定义嵌套在树结构的路径中。

在实例化 CPageLabelsAndTextBoxes 组件时,我们将获得与整个页面( 蓝色 pink和绿色 in ) 相对应的视图。 这是因为 CPageLabelsAndTextBoxes 在它的内部( 在它的定义中) ( 另一个组件使用( 例示),CLabelsAndTextBoxes2 在它的内部( 在它的定义中) 中使用( 例示),即 another Component ( 两次)。

此外,我们看到整个视图的一部分,即视图的一部分,它已经定义或者编码在 CPageLabelsAndTextBoxes 定义中。 实际上,我们看到视图的一部分,它在 CLabelsAndTextBoxes2 中定义了( 编码)。 此外,我们看到视图的部分,它的定义包含在 CLabelsAndTextBoxes1 代码中。

现在我们已经准备好看一下如何使用组件的定义 looks。

CLabelsAndTextBoxes1.js

function CLabelsAndTextBoxes1(prefix,$c,data){
 // html $c.html(''+
 '<p>set '+data+' <input data-bind="value:'+prefix+'a"></p>'+
 '<p>'+data+' is <span data-bind="text:'+prefix+'a"></span></p>'+
 '');
 // jsthis.a=ko.observable(""); 
 // css }

有三个部分:html,js js css和 css。 在文档( 网页) 中定义和插入视图在文档中的特定点插入视图。

web服务定义,视图,视图,视图,视图,视图,视图,视图,视图,视图,视图,数据,数据,数据,数据,数据,数据,信息,信息,信息,信息。

css部分应用样式 style视图插入到文档使用上下文参数 inserted $cclass 属性given的文档,永远不会使用 id's )。

CLabelsAndTextBoxes2.js

function CLabelsAndTextBoxes2(prefix,$c,data){
 // html $c.html(''+
 '<p>set '+data[0]+' <input data-bind="value:'+prefix+'a"></p>'+
 '<p>'+data[0]+' is <span data-bind="text:'+prefix+'a"></span></p>'+
 '<div class="c1"></div>'+
 '<div class="c2"></div>'+
 '');
 // jsvar c1="c1";
 var c2="c2";
 var $c1=$("."+c1,$c);
 var $c2=$("."+c2,$c);
 this[c1]=new CLabelsAndTextBoxes1(prefix+c1+".",$c1,data[1]);
 this[c2]=new CLabelsAndTextBoxes1(prefix+c2+".",$c2,data[2]);
 this[c2].a=this[c1].a;
 this.a=ko.observable("");
 // css}

这个组件定义的有趣之处在于它使用了第一个组件两次。 在视图定义了插入视图从定义的第一个组件到插入这些其他视图视图视图的位置,即插入这些其他视图。 but它是一个实例,它在网页中始终具有相同的值 viewModels ( 同辈)的关系。

最后一点是非常有趣的,我们将在下一个案例研究中使用它。 当你想要在两个不同的( 或者是) 组件实例之间共享数据时,你必须执行这样的事情:不同的组件的定义。

CPageLabelsAndTextBoxes.js

function CPageLabelsAndTextBoxes(prefix,$c,data){
 // html $c.html(''+
 '<p>set '+data[0]+' <input data-bind="value:'+prefix+'a"></p>'+
 '<p>'+data[0]+' is <span data-bind="text:'+prefix+'a"></span></p>'+
 '<div class="c1"></div>'+
 '');
 // jsvar c1="c1";
 var $c1=$("."+c1,$c);
 this[c1]=new CLabelsAndTextBoxes2(prefix+c1+".",$c1,data[1]);
 this.a=ko.observable("");
 // css}

我们将用来实例化和获取页面( 视图视图或者页面本身)的视图的最后一个组件定义 is。 然后我们将在它上面应用 ko.applyBindings() 函数。

labelsAndTextBoxes.htm

<!doctypehtml><html><head><title>CPageLabelsAndTextBoxes"Component"</title><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><scriptsrc="CLabelsAndTextBoxes1.js"></script><scriptsrc="CLabelsAndTextBoxes2.js"></script><scriptsrc="CPageLabelsAndTextBoxes.js"></script><script>$(document).ready(function(){
 ko.applyBindings(new CPageLabelsAndTextBoxes("",$("#page"),["a",["b","cd","dc"]]));
});</script></head><body><divid="page"></div></body></html>

网页或者html格式的html文档的代码已经在之前被修改过。 重要的是要注意的是,javascript 源文件的顺序。 显然,如果 CB的组件定义依赖于 CA的组件定义,则必须在 CB 组件的源代码文件中列出 CA 组件的源代码file定义的源代码文件。

你可以看到,定义有外部依赖关系,这是两个基于xml的javascript插件框架( ),以及其他基于 xml。 在页面的header 文档中列出的源文件中,所有这些依赖项都必须作为一个基于xml的javascript文档。

在页面中使用嵌套格式的组件定义,这取决于它的定义和所有其他组件的定义,这取决于它的定义和所有其它组件。

This end MVVM MVVM,我们将通过可重用的软件单独或者嵌套在树层次方式中,获得整个页面的interesting MVVM。

Master Detail Detail Detail case case case

下图显示了我们将获得的final 结果( 页面)。

这是个的master master detail detail。

接下来是我们要用的数据。

data.js

var data=[
 {
 cols:[
 {value:ko.observable("seat")},
 {value:ko.observable("leon")},
 {value:ko.observable("Barcelona Motors")},
 {value:ko.observable("13500 €")},
 {value:ko.observable("200 km/h")},
 {value:ko.observable("120 hp")},
 {value:ko.observable("silver")}
 ]
 },
 {
 cols:[
 {value:ko.observable("ford")},
 {value:ko.observable("ka")},
 {value:ko.observable("Best Cards 4U")},
 {value:ko.observable("10500 €")},
 {value:ko.observable("160 km/h")},
 {value:ko.observable("70 hp")},
 {value:ko.observable("red")}
 ]
 },
 {
 cols:[
 {value:ko.observable("bmw")},
 {value:ko.observable("320i")},
 {value:ko.observable("Import and Export")},
 {value:ko.observable("18500 €")},
 {value:ko.observable("220 km/h")},
 {value:ko.observable("180 hp")},
 {value:ko.observable("green")}
 ]
 },
 {
 cols:[
 {value:ko.observable("volkswagen")},
 {value:ko.observable("golf")},
 {value:ko.observable("Barcelona Auto")},
 {value:ko.observable("20500 €")},
 {value:ko.observable("220 km/h")},
 {value:ko.observable("150 hp")},
 {value:ko.observable("white candy")}
 ]
 }
];

可以,每个数据行row数据programming定义编程programming每个数据行的定义编程,每一行都显示数据 grids。

首先,我将向你展示一般或者最基本网格组件定义,我们将使用它来显示细节网格。

CGrid.js

function CGrid(prefix,$c,data){
 // html  $c.html(''+
 '<div class="grid" data-bind="foreach:'+prefix+'rows">'+
 '<div class="row" data-bind="foreach:cols">'+
 '<div class="col" data-bind="text:value"></div>'+
 '<div class="col-sep" data-bind="visible:!isLast()">&nbsp;</div>'+
 '</div>'+
 '<div class="clear"></div>'+
 '</div>'+
 '');
 // js this.rows=data;
 this.rows.forEach(function(r){
 var numCols=r.cols.length; 
 r.cols.forEach(function(c,i){
 c.isLast=function(){
 return i===numCols-1;
 };
 });
 });
 // css $(".grid",$c).css({
 "overflow":"hidden" });
 $(".clear",$c).css({
 "clear":"both" });
 $(".row",$c).css({
 "float":"left",
 "border-radius":"16px",
 "border":"1px solid red",
 "background-color":"#cfcfcf" });
 $(".col",$c).css({
 "float":"left",
 "width":"90px",
 "white-space":"nowrap",
 "overflow-x":"auto",
 "margin":"1px 9px",
 "text-align":"center" });
 $(".col-sep",$c).css({
 "float":"left",
 "width":"2px",
 "border-radius":"4px",
 "background-color":"black" });
 $c.css({
 "font-family":"sans-serif" });
}

这种基于xml的组件定义的定义是,以特定的格式接受数据,并将它的显示在一个的普通网格 grid。 当实例化基于xml的组件我们有视图定义,呈现和样式化以及视图 javascript javascript javascript javascript javascript javascript javascript ready视图。

接下来,我将向你展示的组件为网格单选按钮,在这个例子中,一次使用的是主。

CGridWithRadioButtons.js

function CGridWithRadioButtons(prefix,$c,data){
 // html  $c.html(''+
 '<div class="grid" data-bind="foreach:'+prefix+'rows">'+
 '<div class="clear"></div>'+
 '<div class="radio"><input type="radio" name="select" data-bind="click:checked"></div>'+
 '<div class="row" data-bind="foreach:cols">'+
 '<div class="col" data-bind="text:value"></div>'+
 '<div class="col-sep" data-bind="visible:!isLast()">&nbsp;</div>'+
 '</div>'+
 '</div>'+
 '');
 // js var self=this;
 this.rows=data;
 this.doRadio=function(){};
 this.rows.forEach(function(row,i){
 row.checked=(function(j){
 returnfunction(){
 self.i=j;
 self.doRadio();
 }
 })(i); 
 var numCols=row.cols.length;
 row.cols.forEach(function(c,i){
 c.isLast=function(){
 return i===numCols-1;
 };
 });
 });
 // css $(".grid",$c).css({
 "overflow":"hidden" });
 $(".clear",$c).css({
 "clear":"both" });
 $(".radio",$c).css({
 "float":"left" });
 $(".row",$c).css({
 "float":"left",
 "border-radius":"16px",
 "border":"1px solid red",
 "background-color":"#cfcfcf" });
 $(".col",$c).css({
 "float":"left",
 "width":"90px",
 "white-space":"nowrap",
 "overflow-x":"auto",
 "margin":"1px 9px",
 "text-align":"center" });
 $(".col-sep",$c).css({
 "float":"left",
 "width":"2px",
 "border-radius":"4px",
 "background-color":"black" });
 $c.css({
 "font-family":"sans-serif" });
}

关于这个组件定义的特殊内容是,除了呈现的单选按钮每一行radio定义一个函数,当单选按钮被选中时执行。 这里函数必须由使用这里组件的组件重写。

接下来我们会看到 CPageMasterDetail的组件定义。 这是将在整个页面( 或者 ) 中得到的组件,它将为整个页面提供一个惟一的,它是 ko -sincronized。 ,的整个页面都是独一无二的ko-view-viewModel,但有趣的是,它是如何利用模块化的部分或者软件(。组件定义) 来构建每个层次的programming ko-view-viewModel allowing的modular

CPageMasterDetail.js

function CPageMasterDetail(prefix,$c,data){
 // html $c.html(''+
 '<div class="c1"></div>'+
 '<br>'+
 '<div class="c2" data-bind="visible:'+prefix+'selected()"></div>'+
 '');
 // jsvar c1="c1";
 var c2="c2";
 var $c1=$("."+c1,$c);
 var $c2=$("."+c2,$c);
 var self=this;
 this.data=data;
 this.dataForGridWithRadios=function(){
 var data=[];
 self.data.forEach(function(row){ 
 var row2={cols:[]};
 row.cols.forEach(function(obj,i){
 if(i>2){
 return;
 }
 var obj2={value:obj.value};
 row2.cols.push(obj2);
 });
 data.push(row2);
 });
 return data;
 };
 this.dataForDetail=function(){
 var data=[];
 self.data[0].cols.forEach(function(obj,i){
 var row={cols:[{value:ko.observable("")}]};
 data.push(row);
 });
 return data;
 };
 this[c1]=new CGridWithRadioButtons(prefix+c1+".",$c1,this.dataForGridWithRadios());
 this[c2]=new CGrid(prefix+c2+".",$c2,this.dataForDetail())
 this[c1].doRadio=function(){
 var index=self.c1.i;
 self.data[index].cols.forEach(function(c,i){
 self.c2.rows[i].cols[0].value(c.value());
 });
 if(self.selected()!=true){
 self.selected(true);
 }
 };
 this.selected=ko.observable(false);
 // css};

组件定义了特定于应用程序的定义,并在其中定义两个函数,并定义两个函数,例如从数据库中选择的每个用户定义的行标题中选定的每个数据集的明细数据。

在数据处理的情况下,除了定义这两种功能外,还可以通过使用想要的代码覆盖 CGridWithRadioButtons 实例中的功能,即在详细信息中的ko -update数据。

最后,我们查看 html页面的源代码。

masterDetail.htm

<!doctypehtml><html><head><style>/*this is to change appearence of scroll bar*/::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-track{background:#666666;-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); 
 border-radius: 10px;}::-webkit-scrollbar-thumb{background:#ffffff;border-radius: 10px;-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5); 
}</style><title>CPageMasterDetail"Component"</title><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><scriptsrc="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script><scriptsrc="CGridWithRadioButtons.js"></script><scriptsrc="CGrid.js"></script><scriptsrc="data.js"></script><scriptsrc="CPageMasterDetail.js"></script><script>$(document).ready(function(){
 var myViewModel=new CPageMasterDetail("",$("#page"),data);
 ko.applyBindings(myViewModel);
});</script></head><body><divid="page"></div></body></html>

你可以看到它非常简单,而且它在组件定义源文件中的所有代码。

案例研究一加案例研究 2,案例研究 3

本节演示如何以树的形式单独使用或者以树方式嵌套定义,在其他组件的定义中是这样的。 在前两节中,我们使用它自己的( 意思是单独的,不是嵌套的) CPageLabelsAndTextBoxesCPageMasterDetail 组件。 在这一节中,我将把这两个组件定义in一个新的组件定义,to一个 web case case case case case case study。

CPageLabelsAndTextBoxesMasterDetail.js

function CPageLabelsAndTextBoxesMasterDetail(prefix, $c, data){
 // html $c.html(''+
 '<div class="c1"></div>'+
 '<div class="c2"></div>'+
 '');
 //jsvar c1="c1";
 var c2="c2";
 var $c1=$("."+c1,$c);
 var $c2=$("."+c2,$c);
 this[c1]=new CPageLabelsAndTextBoxes(prefix+c1+".",$c1,data[0]);
 this[c2]=new CPageMasterDetail(prefix+c2+".",$c2,data[1]);
 // css $c1.css({
 "float":"left",
 "padding":"10px",
 "border":"3px dashed grey",
 "margin":"10px" });
 $c2.css({
 "float":"left",
 "padding":"10px",
 "border":"3px dashed grey",
 "margin":"10px" });
}

labelsAndTextBoxesMasterDetail.htm

<!doctypehtml><html><head><style>/*this is to change appearence of scroll bar*/::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-track{background:#666666;-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); 
 border-radius: 10px;}::-webkit-scrollbar-thumb{background:#ffffff;border-radius: 10px;-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5); 
}</style><title>CPageLabelsAndTextBoxesMasterDetail"Component"</title><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><scriptsrc="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script><scriptsrc="CGridWithRadioButtons.js"></script><scriptsrc="CGrid.js"></script><scriptsrc="data.js"></script><scriptsrc="CPageMasterDetail.js"></script><scriptsrc="CLabelsAndTextBoxes1.js"></script><scriptsrc="CLabelsAndTextBoxes2.js"></script><scriptsrc="CPageLabelsAndTextBoxes.js"></script><scriptsrc="CPageLabelsAndTextBoxesMasterDetail.js"></script><script>$(document).ready(function(){
 var myViewModel=new CPageLabelsAndTextBoxesMasterDetail("",$("#page"),[["a",["b","cd","dc"]],data]);
 ko.applyBindings(myViewModel);
});</script></head><body><divid="page"></div></body></html>

结语

在本文中,我展示了如何通过开发基于树的Component组件定义( 基于树嵌套的方法) 来进一步实现 MVVM Pattern。 in开发网页,means开发一个只需在多个嵌套组件之间进行定义,并在它的上使用definition定义,可以在视图和viewModels中激活所有 ko -bindings。

基于组件的组件定义是一个软件,可以单独使用,也可以使用嵌套在其他组件中的组件定义定义。

模型的数据格式依赖于页面( 并且在所有其他嵌套的组件定义上) 中的组件定义 instantiated。

树级别的数据共享Sharing在树的一个级别上共享数据可以通过操作 inside properties properties properties properties。


BASE  for  DEF  PUSH  MVVM  Forward  
相关文章