Edit in JSFiddle

function myViewModel() {
    var self = this;
    self.data = ko.observable("ClickMe!!!");
    self.isEdit = ko.observable(false);
    self.goToEdit = function () {
        self.isEdit(true);
    };
}

ko.applyBindings(new myViewModel());

<div>
    <p> <span data-bind="visible:!isEdit(), text:data, click:goToEdit"></span>

        <input type="text" data-bind="visible:isEdit, value: data, hasfocus:isEdit" />
    </p>
    <p>Html:<span data-bind="html:'<b>foo</br>'"></span>
    </p>
    <p>css:<span data-bind="css: isEdit()?'c1':'c2'">bar</span>
    </p>
    <p>style:<span data-bind="style: {color:'red', backgroundColor:'green', fontSize:'30px'}">foo</span>
    </p>
    <p>attr:<a data-bind="attr: {href:'http://tw.yahoo.com', target:'_blank', title:'foo'}">yahoo</a>
    </p>
</div>

.c1 {
    color:red;
    font-size:30px;
    background-color:green
}
.c2 {
    color:blue;
    font-size:30px;
    background-color:red
}