Search code examples
javascripthtmlbreeze

Enable save button on change of input box

I am breeze entity manager to check if there are changes made to entity. So i declare observable

isSomeChanged = ko.observable()

Then i tie value like this 

 isSomeChanged(datacontext.hasChanges());

Html is 

 <button data-bind="click: SaveData, enable: isSomeChanged() "> Save</button>

So now if i changed something in my page then it enables or disables button. But if i type something in input then button is enabled only when i tab out and not as soon as i typed.

How can i enable save button as soon as something is typed?

Solution

  • Make sure your isSomeChanged observable is updated when the breeze EntityManager's hasChanges property changes:

    isSomeChanged = ko.observable();

// update the isSomeChanged observable when the hasChangesChanged event fires.
entityManager.hasChangesChanged.subscribe(
    function(changeArgs) {
        isSomeChanged(changeArgs.hasChanges);
    });

    Ensure your input's value binding has a corresponding valueUpdate parameter set to "input". This will cause each change to the input is written to the entity property immediately instead of when the input loses focus.

    <input data-bind="value: entity.FirstName, valueUpdate: 'input'" />

    Also, your button's enable binding can be expressed like this (no need for the parens):

    <button data-bind="click: SaveData, enable: isSomeChanged">Save</button>