avalon.js 转义html,avalon模块的内建适配器

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)

});