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 綁定， 那么當(dāng) capital 為空的時(shí)候吉嚣， 子節(jié)點(diǎn) capital.cityName 這個(gè)屬性是不存在的梢薪，代碼會(huì)報(bào)錯(cuò)。
2.使用表達(dá)式進(jìn)行if綁定
<ul>
<li>This item always appears</li>
<!-- ko if: someExpressionGoesHere -->
<li>I want to make this item present/absent dynamically</li>
<!-- /ko -->
</ul>
如果表達(dá)式包含 observable 變量尝哆，那么當(dāng)變量值重新計(jì)算時(shí)秉撇，表達(dá)式的值也會(huì)被重新計(jì)算。相應(yīng)的秋泄，當(dāng)表達(dá)式的值被重新計(jì)算后 琐馆，if 里面的代碼塊會(huì)被重新添加或者移除 。當(dāng)重新添加代碼塊時(shí)恒序，data-bind 屬性會(huì)被應(yīng)用到原來代碼的新拷貝上瘦麸。
ifnot bing
if 綁定的表達(dá)式取反
恩 就這么簡單！Ｆ缧病滋饲！
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>歡迎回來，上次登錄時(shí)間為： <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;
//監(jiān)控用戶填入的用戶名和密碼
self.userName = ko.observable('請輸入用戶名');
self.psw = ko.observable();
//用戶明細(xì)監(jiān)控
self.userInfo = ko.observable();
//通過if綁定來控制登錄表單的顯示與否
self.showInput = ko.observable(true);
//點(diǎn)擊登錄按鈕時(shí)觸發(fā)表單的提交事件
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事件废封，當(dāng)用戶聚焦用戶名輸入框時(shí)，清除input中的內(nèi)容
self.clearInput = function(){
self.userName('');
}
}
ko.applyBindings(new ViewModel());