0

Id like to have a save and save (add another) button. The first saves an item, but stays on the same item, the other button saves the item, but displays the same template to add a new item. The save (add another) button is there to save time. How can I have the submit binding in knockout.js handle these two different instances?

<form class="box clearfix" action="@Request.RawUrl" data-bind="submit: save">
    @Html.Partial("EditorTemplates/Division", Model.Division)
    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn btn-inverse">
                <i class="icon-save icon-white"></i> Save</button>
            <!-- <button type="submit" class="btn btn-inverse">
                <i class="icon-save icon-white"></i> Save (Add Another)</button> -->
        </div>
    </div>
</form>
shivam
  • 161
  • 1
  • 11
Mike Flynn
  • 22,342
  • 54
  • 182
  • 341

1 Answers1

3

Check this fiddle -

http://jsfiddle.net/hyHmD/

Basically, this would be using the click binding instead of the submit binding. It would just have your second button call the first in the view model and then re-call the add person object.

    self.addPerson = function () {
        self.newModel(new personModel(""));
        self.isAddingNew(true);
    };

    self.save = function (person) {
        self.persons.push(person);
        self.isAddingNew(false);
    };

    self.saveAndAdd = function (person) {
        self.save(person);
        self.addPerson();
    };

If you were dead set on using the submit binding just pass along an additional parameter 

<button data-bind="submit: function(data, event) { save(false, data, event) }">
    Submit
</button>

<button data-bind="submit: function(data, event) { save(true, data, event) }">
    Submit and Add Another Person
</button>

where your function was something like 

save: function(addNew, data, event) {
            //Save Data
            if (addNew) {
                addNewPerson();
            } else {
                isAddingNew(false);
            }
        }
PW Kad
  • 14,953
  • 7
  • 49
  • 82
  • Seems we are on the right track, but I need both buttons inside the same form. – Mike Flynn Jul 18 '13 at 18:40
  • Read the second portion I just added - If you want to bind it to a submit you can do it the same way as with the click, just add in an additional parameter such as listed. You will need to test this in your application more in depth, but if you would like I can add an example to the fiddle of how to have two buttons with the same function but different parameters, just let me know. – PW Kad Jul 18 '13 at 18:42
  • Yea I dont see it from your code, so a fiddle might be needed. I know how to send additional parameters to functions, can how to do it in context with two buttons inside the same form using the submit binding. Look at my example above. – Mike Flynn Jul 18 '13 at 18:45
  • 1
    After looking over what you are trying to do it seems you are trying to post the form back and THEN check for which button was clicked, not catch the form post and keep it showing. Have you thought about just doing it that way? http://stackoverflow.com/questions/547821/two-submit-buttons-in-one-form might help – PW Kad Jul 18 '13 at 19:50
  • That might be the easiest and fastest way to do it. This might be the best approach and not over enginneered like I am doing. Let me give this a try. I also posted this. http://stackoverflow.com/questions/17732572/modify-and-call-custom-binding-in-knockout-js-explicitly – Mike Flynn Jul 18 '13 at 19:55
  • I think it would also be the more proper approach, just thinking about it it kind of defeats the purpose of doing a form submission instead of a click binding like I mentioned above. Either way would technically work but if there was a good enough reason to submit, then KISS! – PW Kad Jul 18 '13 at 19:57