foreach bind
1.示例
<h4>People</h4>
<ul data-bind="foreach:people">
<li>
Name at position <span data-bind="text:$index"></span>:
<span data-bind="text:name"></span>
<a href="#" data-bind="click:$parent.removePerson">Remove</a>
</li>
</ul>
<button data-bind="click:addPerson">Add</button>
function ViewModel(){
var self = this;
self.people = ko.observableArray([
{name:"Britney"},
{name:"Bryant"},
{name:"Adele"}
]);
self.removePerson = function(){
self.people.remove(this);
};
self.addPerson = function(){
self.people.push({name:"Ellie comes at " + new Date().toLocaleString()});
};
}
ko.applyBindings(new ViewModel());
2.不带元素的绑定
<ul>
<li>Header item</li>
<!-- ko foreach:myItems -->
<li>Item <span data-bind="text:$data"></span></li>
<!-- /ko -->
</ul>
ko.applyBindings({
myItems:['A','B','C','D']
});
if bind
1.绑定示例
<ul data-bind="foreach:countries">
<li>
Country:<span data-bind="text:name"></span>
<div data-bind="if:capital,style:{display:'inline-block'}">
Capital:<span data-bind="text:capital.cityName"></span>
</div>
</li>
</ul>
ko.applyBindings({
countries:[
{name:'中国',capital:{cityName:'北京'}},
{name:'美国',capital:{cityName:'华盛顿'}},
{name:'香港',capital:null},
{name:'日本',capital:{cityName:'东京'}}
]
})；
if 绑定是很重要的，它能让代码正常工作。 比如上面的例子，如果没有 if 绑定， 那么当 capital 为空的时候， 子节点 capital.cityName 这个属性是不存在的，代码会报错。
2.使用表达式进行if绑定
<ul>
<li>This item always appears</li>
<!-- ko if: someExpressionGoesHere -->
<li>I want to make this item present/absent dynamically</li>
<!-- /ko -->
</ul>
如果表达式包含 observable 变量，那么当变量值重新计算时，表达式的值也会被重新计算。相应的，当表达式的值被重新计算后 ，if 里面的代码块会被重新添加或者移除 。当重新添加代码块时，data-bind 属性会被应用到原来代码的新拷贝上。
ifnot bing
if 绑定的表达式取反
恩 就这么简单！！！
with bind
<form data-bind="submit:login,if:showInput">
用户名：<input data-bind="value:userName,event:{focus:clearInput}" /><br><br>
密码:<input type="password" data-bind="value:psw"><br><br>
<button type="submit">登录</button>
</form>
<div data-bind="with:userInfo">
<h3>欢迎回来，上次登录时间为： <span data-bind="text:lastLoginDate"></span></h3>
<ol data-bind="foreach:userInfoData">
<li data-bind="text:text"></li>
</ol>
<button data-bind="click:$parent.signOut">退出登录</button>
</div>
function ViewModel(){
var self=this;
//监控用户填入的用户名和密码
self.userName = ko.observable('请输入用户名');
self.psw = ko.observable();
//用户明细监控
self.userInfo = ko.observable();
//通过if绑定来控制登录表单的显示与否
self.showInput = ko.observable(true);
//点击登录按钮时触发表单的提交事件
self.login = function(){
var username = self.userName();
var loginLog = [
{text:username +' 今天是星期'+(new Date().getDay()+1)},
{text:username +' 美好的一天从这里开始'},
{text:username+' 祝您生活愉快！'}
];
//向用户信息userInfo 中写入信息
self.userInfo({lastLoginDate:new Date().toLocaleString(),userInfoData:loginLog});
//登录成功后，隐藏form表单
self.showInput(false);
}
//绑定退出登录
self.signOut = function(){
alert("确定退出吗？");
//清空userInfo
self.userInfo(undefined);
//退出登录后显示登录表单
self.showInput(true);
}
//绑定focus事件，当用户聚焦用户名输入框时，清除input中的内容
self.clearInput = function(){
self.userName('');
}
}
ko.applyBindings(new ViewModel());