javascript - Knockout js initialize the observable value from element content

Question

I have some thing like this

<td data-bind="text: email_sended">
  <%= invite.email_send %>
</td>

function AdminInvitesViewModel() {
   var self = this;
   self.email_send = ko.observable();
}

ko.applyBindings(new AdminInvitesViewModel());

how can i initialize the observable from the content of the container ?

I this case the email send is a true/false value.

Answer 1

If this is necessary, then you can do this pretty easily with a custom binding.

Here is a binding that would set an existing observable using the element's innerText or create an observable if it doesn't exist.

ko.bindingHandlers.textWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data) {
        var property = valueAccessor(),
            content = element.innerText || element.textContent;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }

        data[property](content);

        ko.applyBindingsToNode(element, { text: data[property] });
    }
};

You would use it like:

<div data-bind="textWithInit: 'email_sended'"></div>

Note that the property name is in quotes, as the binding supports the observable not existing yet

Sample: http://jsfiddle.net/rniemeyer/kKBBj/