带KnockoutJS的击倒代码

分享于 

11分钟阅读

Web开发

  繁體 雙語

如果你现在进行任何客户端JavaScript编码,尤它的是单页应用程序,你将不能利用至少一个JavaScript库或者框架。 这些库的主要优点是数据绑定,尤其是两种数据绑定方式。 实现两种方式,声明性数据绑定可以显著减少代码库,使web应用程序更容易阅读和理解。

实现双向数据绑定的两个最著名的库是AngularJS和 KnockoutJS。 当AngularJS越来越流行并提供比KnockoutJS更强大的功能时,它无疑比更复杂,更难启动和运行,developer你自己的框架或者体系结构。 另一方面,KnockoutJS本质上只做一件事,数据绑定,它很好。 然而,正如你将看到的,这一点对于你的web应用程序的可以读性和可以维护性。

HTML和JavaScript的数据绑定在它的核心是一个非常简单的概念。 它提供了一种方法,使DOM元素( HTML ) 与JavaScript对象或者变量相关联,这样它们就可以同步更改关联的实体。 例如当用户编辑 <input> HTML元素中绑定到JavaScript变量( 或者数据位置)的值时,该变量也会被更新。 无需开发代码,例如,在页面提交时找到正确的DOM元素并将相应的值复制到JavaScript变量或者对象。

既然你对数据绑定有了基本的了解,让我们变得更加务实,并编写一些代码,利用KnockoutJS提供的内容。 我们将从一个简单的例子开始,它只表示一种数据绑定。

<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"/><scripttype="text/javascript"src="jquery-1_11_2_min.js"></script><scripttype="text/javascript"src="knockout-3.3.0.js"></script><script>var theViewModel = null;
 $(document).ready(function ()
 {
 theViewModel = ViewModel();
 ko.applyBindings(theViewModel);
 });
 function ViewModel()
 {
 var self = this;
 self.FirstName = "Tom";
 self.LastName = "Brady";
 return self;
 }
 function firstName_OnBlur()
 {
 alert(theViewModel.FirstName);
 }
 </script></head><body><div><label>First Name:</label><inputtype="text"data-bind="value: FirstName"onblur="firstName_OnBlur();"/></div><div><label>Last Name:</label><inputtype="text"data-bind="value: LastName"/></div></body></html>

在 上面 示例中有三个特定于KnockoutJS的项。 其中两个是两个 <input> 元素上的data-bind 属性,以声明方式将元素绑定到 JavaScript。 data-bind 属性总是由关联元素( 后跟冒号和该属性应该绑定到( 你还可以在同一属性中绑定多个属性)的JavaScript ) 组成的属性 NAME 组成。 这个JavaScript可以是一个JavaScript表达式,但通常是一个对象属性。

第三个knockoutjs特定项是对 $(document).ready 函数中 ko.applyBindings 函数的JavaScript调用。 applyBindings 函数告诉KnockoutJS将UI与给定的JavaScript对象关联起来。 在本例中,任何HTML元素都可以绑定到ViewModel对象的任何属性。 但是,可以将一个元素作为第二个参数传递给 ko.applyBindings,从而将多个JavaScript对象关联到页面的不同部分。 默认情况下,当第二个参数中没有传递任何内容时,绑定将应用到整个页。

当运行"名字"input元素的模糊处理程序时,在上面的例子中你会注意到,在这个例子中总是显示textbox的原始值,这是在本例中。 这是因为 上面 示例只实现单向数据绑定。 实现两种方法就像调用KnockoutJS库上的函数一样,表明绑定应该是'可以观察',这意味着应该通知相关实体。 用以下方法替换 ViewModel 函数:

function ViewModel()
{
 var self = this;
 self.FirstName = ko.observable("Tom");
 self.LastName = ko.observable("Brady");
 return self;
}

如果希望在UI元素上进行双向绑定,则 observable 函数是要调用的函数。 单个参数是默认值。 现在如果使用修改后的ViewModel 函数运行示例,firstName_OnBlur 函数中的警报将通过JavaScript对象变量显示 <input> 元素的更新值。 另外要注意的一点是,当'观察'对象KnockoutJS实际上会为底层的JavaScript对象创建一个函数。 因这里,为了访问需要处理的对象( 或者变量)的值,可以将'( ) 应用到对象的末尾。 在示例 上面 中,对'提醒'的调用将按如下方式更改:

alert(theViewModel.FirstName());

设置对象的值将类似于你需要将值作为参数提供给函数,如下所示:

theViewModel.FirstName('Bill');

我认为这是惟一的'gotcha',我相信它实现了这种方法,以支持所有版本的JavaScript和浏览器。

任何开发人员的下一个逻辑问题可能是"如何实现迭代绑定,以便动态列表的动态列表可以绑定到JavaScript对象列表( 或者 array ) )"这几乎是简单的。 调用'可以观察'函数相反,你将调用KnockoutJS中的observableArray 函数,如下面的示例所示。

<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"/><scripttype="text/javascript"src="jquery-1_11_2_min.js"></script><scripttype="text/javascript"src="knockout-3.3.0.js"></script><script>var theViewModel = null;
 $(document).ready(function ()
 {
 theViewModel = ViewModel();
 ko.applyBindings(theViewModel);
 });
 function Car(make, model)
 {
 var self = this;
 self.Make = ko.observable(make);
 self.Model = ko.observable(model);
 }
 function ViewModel()
 {
 var self = this;
 self.Cars = ko.observableArray([
 new Car("Honda", "CR-V"),
 new Car("Toyota", "Sienna"),
 new Car("Ford", "Explorer")
 ]);
 self.onClick = function ()
 {
 alert(this.Make() + ' ' + this.Model());
 };
 return self;
 }
 </script></head><body><div><label>Colors:</label><table><thead><tr><th>Make</th><th>Model</th></tr></thead><tbodydata-bind="foreach: Cars"><trdata-bind="click: onClick"><td><inputdata-bind="value: Make"/></td><td><inputdata-bind="value: Model"/></td></tr></tbody></table></div></body></html>

在本示例中,需要注意一些事项。 <tbody> 元素的数据绑定中的foreach 关键字是对 array 进行迭代的KnockoutJS方法。 默认情况下,任何后代元素都绑定到 array 中的元素,而不是父对象( 在这种情况下,ViewModel ),这解释了为什么我们可以在数据绑定属性中引用Make和Model属性。

要注意的另一个项是 table 行元素的数据绑定中对'单击'的引用。 KnockoutJS还允许你将某些事件绑定到数据模型中的函数。 在示例 上面 中,我们将 ViewModel (。这里案例中的父级) 中的onClick 函数与每个 table 行的click事件关联起来。 在本例中,'这个'引用的范围,inside 这个函数是 array 元素本身。

你将在两个示例 上面 中注意到,'id'或者'姓名'属性从未分配给任何HTML元素。 这是因为没有必要。 如果正确实现数据绑定,JavaScript代码不需要引用DOM中的任何元素。 相反,你将引用JavaScript变量/对象来获取这些元素的值。 KnockoutJS负责剩下的。

另一个功能是'计算的observables',作为KnockoutJS的一部分,我想指出这个库的用途和功能,以及数据绑定。 这里功能提供了一种使用多个可见的数据进行双向数据绑定的方法。 它允许将JavaScript函数与DOM元素( 而不是变量或者对象属性) 关联起来,从而使值可以是'计算',而不仅仅是分配给它的赋值函数。

作为计算可以见的示例,我们可以使用第一个演示 上面 并将 FullName 属性添加到通过连接第一个和最后一个 NAME 属性( 中间有一个空间)的ViewModel 对象。

function ViewModel()
{
 var self = this;
 self.FirstName = ko.observable("Tom");
 self.LastName = ko.observable("Brady");
 self.FullName = ko.computed(function ()
 {
 return self.FirstName() + "" + self.LastName();
 });
 return self;
}

我们可以通过修改 firstName_OnBlur 事件函数来测试新的FullName,以显示完整的NAME,如下所示:

function firstName_OnBlur()
{
 alert(theViewModel.FullName());
}

熟悉单页web应用程序的开发人员应该了解KnockoutJS库提供的强大功能,特别是考虑到它的占用的空间和有限。 除了定制绑定。定制元素和订阅变更等功能之外,还有一些功能,可以帮助你实现最重要的功能,并且可以帮助你立即开始绑定。


cod  knockoutjs  
相关文章