knockoutjs六
knockoutjs六
今天要讲的是with绑定，with绑定和if有点相似，用官方文档的说法他的作用是创建了一个上下文，
data-bind="text: city"& &
data-bind="with: coords"&
data-bind="text: latitude"& &, Longitude:
data-bind="text: longitude"& &
function Model() {
var self = this;
city=ko.observable( "London");
coords=ko.observable( {
latitude: 51.5001524,
longitude: -0.1262362
var model = new Model();
ko.applyBindings(model);
因为用了with，所以with下面的子元素的节点就不需要使用coords.latitude和coords.longitude了，因为他们这时候的上下文已经切换到了coords下了。
当然with还有个作用，当with的条件是null或者是undefined，那么下面的子元素就不会加载，如果不空就加载，这样就避免了一些错误，不会当coords是null或者是undefined的时候还调用coords.latitude发生报错。
也可以使用虚节点调用with：
&Header element&
这次的比较简单，就介绍这么多。代码托管在可以直接克隆。希望大家有意见可以留言，有疑问或者错误可以加我的qq和我交流
没有更多推荐了，大圣此去欲何，踏南天碎凌霄，若一去不回，便一去不回.
knockoutjs中的visible绑定
visible就是用来控制是否显示的，当值为true的时候则显示，为false的时候隐藏，knockoutjs有双向绑定的机制，假设现在有一个场景，从后台查出数据，数据格式为一个list，查出数据后需要绑定到前台页面上，这时候需要去判断查回的list是否是存在的，也就是有数据的，不是null也不是count为0，如果数据是存在的，那么则显示一个内容，如果不存在，则隐藏该内容。
1.visible绑定基本结构：
&div data-bind="visible:条件"&
2.简单的visible绑定：
&div data-bind="visible:true"&
&h1&内容&/h1&
3.visible根据list内容进行显示：
&title&根据list的count进行visible绑定&/title&
&script type="text/javascript" src="knockout-3.4.1.js"&&/script&
&div data-bind="visible: myValues().length & 0"&
&h1&我来也&/h1&
&input type="button" value="向list中添加数据" onclick="addToList()"&
&input type="button" value="清空list中数据" onclick="clearList()"&
&script type="text/javascript"&
var AppViewModel = {
myValues: ko.observableArray([])
//定义一个数组
function addToList(){
AppViewModel.myValues.push("data"); //向myValues数组中添加一条数据
function clearList(){
AppViewModel.myValues([]);
//清空数组
ko.applyBindings( AppViewModel);
//将数据绑定到页面上
效果展示：
页面初始化时，数组中没有数据：
点击向list中添加数据按钮时：
点击清空list中数据按钮时：
visible的判定依据就是结果是ture还是false,当判断一个list的时候需要注意的是listname().length，这里的listname后需要加上括号，否则就会报错，有兴趣的可以试一下！
扫码向博主提问
非学，无以致疑；非问，无以广识
擅长领域：
没有更多推荐了，knockoutJS关于绑定语法
visible 绑定
visible绑定到DOM元素上，使得该元素的hidden或visible状态取决于绑定的值。
&div data-bind="visible: shouldShowMessage"&
You will see this message only when "shouldShowMessage" holds a true value.
&script type="text/javascript"&
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示&span&或者&em&上非常有用，但是你可以用在任何元素上。
Today's message is: &span data-bind="text: myMessage"&&/span&
&script type="text/javascript"&
var viewModel = {
myMessage: ko.observable() // Initially blank
viewModel.myMessage("Hello, world!"); // Text appears
html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。
&div data-bind="html: details"&&/div&
&script type="text/javascript"&
var viewModel = {
details: ko.observable() // Initially blank
viewModel.details("&em&For further details, view the report &a href='report.html'&here&/a&.&/em&");
// HTML content appears
css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）
&div data-bind="css: { profitWarning: currentProfit() & 0 }"&
Profit Information
&script type="text/javascript"&
var viewModel = {
currentProfit: ko.observable(150000)
// Positive value, so initially we don't apply the "profitWarning" class
viewModel.currentProfit(-50);
// Causes the "profitWarning" class to be applied
效果就是当currentProfit 小于0的时候，添加profitWarning CSS class到元素上，如果大于0则删除这个CSS class。
style 绑定
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）
&div data-bind="style: { color: currentProfit() & 0 ? 'red' : 'black' }"&
Profit Information
&script type="text/javascript"&
var viewModel = {
currentProfit: ko.observable(150000) // Positive value, so initially black
viewModel.currentProfit(-50); // Causes the DIV's contents to go red
当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。
&a data-bind="attr: { href: url, title: details }"&
&script type="text/javascript"&
var viewModel = {
url: ko.observable("year-end.html"),
details: ko.observable("Report including final year-end statistics")
呈现结果是该连接的href属性被设置为year-end.html， title属性被设置为Report including final year-end statistics。
click 绑定
click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。
You've clicked &span data-bind="text: numberOfClicks"&&/span& times
&button data-bind="click: incrementClickCounter"&Click me&/button&
&script type="text/javascript"&
var viewModel = {
numberOfClicks: ko.observable(0),
incrementClickCounter: function () {
var previousCount =this.numberOfClicks();
this.numberOfClicks(previousCount +1);
每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。
event 绑定
event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。
submit 绑定
submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。
当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个，使用submit绑定就是为了处理view model的自定义函数的，而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作，你可以在你的submit句柄里返回true。
enable 绑定
enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。
disable 绑定
disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input，select，和textarea上非常有用。
disable绑定和enable绑定正好相反，详情请参考enable绑定。
value 绑定
value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件&input&，&select&和&textarea&上。
当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。
注：如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。
checked 绑定
checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox（&input type='checkbox'&）或者radio button（&input type='radio'&） 。当用户check关联的form表单控件的时候，view model对应的值也会自动更新，相反，如果view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。
注：对text box，drop-down list和所有non-checkable的form表单控件，用来读取和写入是该元素的值，而不是checked绑定。
options 绑定
options绑定控制什么样的options在drop-down列表里（例如：&select&）或者 multi-select 列表里 （例如：&select size='6'&）显示。此绑定不能用于&select&之外的元素。关联的数据应是数组（或者是observable数组），&select&会遍历显示数组里的所有的项。
注：对于multi-select列表，设置或者获取选择的多项需要使用绑定。对于single-select列表，你也可以使用读取或者设置元素的selected项。
selectedOptions 绑定
selectedOptions绑定用于控制multi-select列表已经被选择的元素，用在使用options绑定的&select&元素上。
当用户在multi-select列表选择或反选一个项的时候，会将view model的数组进行相应的添加或者删除。同样，如果view model上的这个数组是observable数组的话，你添加或者删除任何item（通过push或者splice）的时候，相应的UI界面里的option项也会被选择上或者反选。这种方式是2-way绑定。
注：控制single-select下拉菜单选择项，你可以使用value绑定。
uniqueName 绑定
uniqueName绑定确保所绑定的元素有一个非空的name属性。如果该元素没有name属性，那绑定会给它设置一个unique的字符串值作为name属性。你不会经常用到它，只有在某些特殊的场景下才用到，例如：
在使用KO的时候，一些技术可能依赖于某些元素的name属性，尽快他们没有什么意义。例如，jQuery Validation验证当前只验证有name属性的元素。为配合Knockout UI使用，有些时候需要使用uniqueName绑定避免让jQuery Validation验证出错。IE 6下，如果radio button没有name属性是不允许被checked了。大部分时候都没问题，因为大部分时候radio button元素都会有name属性的作为一组互相的group。不过，如果你没声明，KO内部会在这些元素上使用uniqueName那么以确保他们可以被checked。
&input data-bind="value: someModelProperty, uniqueName: true"/&
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
直接上代码rt 一个个人信息的页面 有名字和孩子两种属性，孩子是个数组，用knockoutjs绑定以后 ，每次点击增加 都会增加一个输入框 ，但是 点击输出按钮的时候控制台答应出来
children 信息
一直是个空数组 ，没有随着input框变化
function Person(name.children){
var self = this
self.name = ko.observable（name）;
self.children =
ko.observableArray(ko.utils.arrayMap(children,function(child){
return ko.observable(child);
self.addChild = function() {
self.children.push(ko.observable(" "));
}.bind(self);
var model = new Person('',[''])
ko.applyBindings(model)
$(".btn").click(function(){
var tmpDATA =
ko.toJSON(model.emailAddress())
console.log(tmpDATA);
&div&&input data-bind="value:text"&&/div&
&ul data-bind="foreach:children"&
&li &&input type="text" data-bind="value:$data"/&&/li&&button data-bind="click:$root.addChild"&&/button&
&button class="btn"&输出数据&/button&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
第一：$data是不是ko的只是一个普通的js变量，因此你的addChild方法执行，跟本无法添加你输入的值。第二：你为什么总是push空的值啊，你应该push你输入的值。
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件&input&，&select&和&textarea&上。
当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。
注：如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。
&代码如下对两个input进行value的属性绑定
&p&Login name: &input data-bind="value: userName"/&&/p&
&p&Password: &input type="password" data-bind="value: userPassword"/&&/p&
&script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"&&/script&
&script type="text/javascript"&
var viewModel = {
userName: ko.observable(""),
userPassword: ko.observable("abc")
ko.applyBindings(viewModel);
运行后效果为
注意密码的type为password
KO设置此参数为元素的value值。之前的值将被覆盖。
&&& 如果参数是监控属性observable的，那元素的value值将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。
&&& 如果你提供的参数不是一个数字或者字符串（而是对象或者数组）的话，那显示的value值就是yourParameter.toString() 的内容（通常没用，所以最好都设置为数字或者字符串）。
&&& 不管什么时候，只要你更新了元素的值，那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点（例如onchange事件）的时候，KO才更新这个值，但是你可以通过第2个参数valueUpdate来特别指定改变值的时机。
valueUpdate
&&如果你使用valueUpdate参数，那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项：
&&&&&&&&&&& &change&（默认值） - 当失去焦点的时候更新view model的值，或者是&select& 元素被选择的时候。
&&&&&&&&&&& &keyup& & 当用户敲完一个字符以后立即更新view model。
&&&&&&&&&&& &keypress& & 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup，这个更新和keydown是一样的。
&&&&&&&&&&& &afterkeydown& & 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。
&&&&&&& 上述这些选项，如果你想让你的view model进行实时更新，使用&afterkeydown&是最好的选择。
&p&Your value: &input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/&&/p&
&p&You have typed: &span data-bind="text: someValue"&&/span&&/p&
someValue: ko.observable("edit me")
绑定下拉菜单drop-down list（例如SELECT）
&Knockout对下拉菜单drop-down list绑定有一个特殊的支持，那就是在读取和写入绑定的时候，这个值可以是任意JavaScript对象，而不必非得是字符串。在你让你用户选择一组model对象的时候非常有用。具体例子，参考options绑定。
类似，如果你想创建一个multi-select list，参考selectedOptions绑定。
更新observable和non-observable属性值
&如果你用value绑定将你的表单元素和你的observable属性关联起来，KO设置的2-way的双向绑定，任何一方改变都会更新另外一方的值。
&但是，如果你的元素绑定的是一个non-observable属性（例如是一个原始的字符串或者JavaScript表达式） ,KO会这样执行：
　　1.如果你绑定的non-observable属性是简单对象，例如一个常见的属性值，KO会设置这个值为form表单元素的初始值，如果你改变form表单元素的值，KO会将值重新写回到view mode的这个属性。但当这个属性自己改变的时候，元素却不会再变化了（因为不是observable的），所以它仅仅是1-way绑定。
　　2.如果你绑定的non-observable属性是复杂对象，例如复杂的JavaScript 表达式或者子属性，KO也会设置这个值为form表单元素的初始值，但是改变form表单元素的值的时候，KO不会再写会view model属性，这种情况叫one-time-only value setter，不是真正的绑定。
&p&First value: &input data-bind="value: firstValue"/&&/p&
&!-- two-way binding --&
&p&Second value: &input data-bind="value: secondValue"/&&/p&
&!-- one-way binding --&
&p&Third value: &input data-bind="value: secondValue.length"/&&/p&
&!-- no binding --&
&script type="text/javascript"&
var viewModel = {
firstValue: ko.observable("hello"), // Observable
secondValue: "hello, again"// Not observable
ko.applyBindings(viewModel);
阅读(...) 评论()}