knockout.js并根据表单中按下的按钮提交不同功能的绑定

时间:2013-07-18 18:22:34

标签: forms knockout.js

我想要保存并保存(添加另一个)按钮。第一个保存项目,但保留在同一个项目上,另一个按钮保存项目,但显示相同的模板以添加新项目。保存(添加另一个)按钮用于节省时间。如何让knockout.js中的提交绑定处理这两个不同的实例?

<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>

1 个答案:

答案 0 :(得分:3)

检查这个小提琴 -

http://jsfiddle.net/hyHmD/

基本上,这将使用点击绑定而不是提交绑定。它只会让您的第二个按钮调用视图模型中的第一个按钮,然后重新调用添加人物对象。

    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();
    };

如果您已设置使用提交绑定,则只需传递一个附加参数

<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>

你的功能就像

save: function(addNew, data, event) {
            //Save Data
            if (addNew) {
                addNewPerson();
            } else {
                isAddingNew(false);
            }
        }