text bindings,第一个传参将强制转换为字符串,假值为"",然后变成目标节点的innerText!
今天的天气为:
$.require("ready,more/avalon", function(){
var viewModel = {
myMessage: $.observable()
};
$.applyBindings(viewModel);
setTimeout(function(){
viewModel.myMessage("晴转多云");
},1000)
});
使用computed
这价格
$.require("ready,more/avalon", function(){
var viewModel = {
price: $.observable(24.95)
};
viewModel.priceRating = $.computed(function() {
return this.price() > 50 ? "可以接受" : "承担不起";
}, viewModel);
$.applyBindings(viewModel);
});
上面例子相当于:
这价格
<script type="text/javascript">
$.require("ready,more/avalon", function(){
var viewModel = {
price: $.observable(24.95)
};
$.applyBindings(viewModel);
});
</script>
最后要注意text的行为:
innerInner与textContent会对标签进行转义,如
$.require("ready,more/avalon", function(){
var viewModel = {
myMessage: $.observable("Hello, world!")
};
$.applyBindings(viewModel);
});
一个不断变化的innerText:
The name is
$.require("ready,more/avalon", function(){
function MyViewModel() {
this.firstName = $.observable('Bob');
this.lastName = $.observable('Smith');
this.fullName = $.computed({
getter: function () {
return this.firstName() + " " + this.lastName();
},
setter: function (value) {
var lastSpacePos = value.lastIndexOf(" ");
if (lastSpacePos > 0) { // Ignore values with no space character
this.firstName(value.substring(0, lastSpacePos));
// Update "firstName"
this.lastName(value.substring(lastSpacePos + 1));
// Update "lastName"
}
},
scope: this
})
}
var viewModel = new MyViewModel
$.applyBindings(viewModel);
setTimeout(function(){
viewModel.firstName("first"); // change
},1000);
setTimeout(function(){
viewModel.lastName("last"); // change
},2000)
setTimeout(function(){
viewModel.fullName("XX YY"); // change
},3000)
});