使用淘汰赛js在表单中编辑功能答案

【问题标题】：Edit functionality in form using knockout js使用淘汰赛js在表单中编辑功能
【发布时间】：2014-08-07 07:41:24
【问题描述】：

您好，我正在使用淘汰赛 js 处理表单，我必须执行 CRUD 操作。除了更新（编辑）之外，我可以做所有这些。我希望单击编辑时打开与单击 addperson 时打开相同的表单，但具有人员的值。这是我的代码

<html>
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="knockout-3.1.0.js"></script>
</head>
<body>
<a href="#" data-bind="click:addFields">ADDPerson</a>
<a href="#" data-bind="click:resetPerson">Reset</a>
    <div data-bind="foreach:fields,visible:show">
        <div data-bind="text:firstName"></div>
        <div data-bind="text:lastName"></div>
        <a href="#" data-bind="click:$root.remove">Remove</a>
        <a href="#" data-bind="click:$root.edit" >edit</a>
    </div>
<form data-bind="visible:showfields">
    First Name: 
    <input data-bind="value:formFirstName"/>
    Last Name:
    <input data-bind="value:formLastName"/> 
    <a href="#" data-bind="click:addPerson">ADD</a>
</form>
<body>
<script>
function person(firstName, lastName) {
    var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);

}

function personForm(formFirstName, formFirstName) {
    var self = this;
    self.formFirstName = ko.observable("david");
    self.formLastName = ko.observable("rock");
}

function personViewModel() {
    var self = this;
    self.formFirstName = ko.observable("add");
    self.formLastName = ko.observable("Value");
    self.show = ko.observable(true);
    self.showfields = ko.observable(false);
    self.fields = ko.observableArray([
        new person("paul", "kerry"),
        new person("john", "cena")
    ]);
    self.addFields = function() {
        self.show(false);
        self.showfields(true);
    };
    self.addPerson = function() {
        self.fields.push(new person(self.formFirstName(), self.formLastName()));
        self.show(true);
        self.showfields(false);
    }
    self.resetPerson = function() {
        self.fields.removeAll();
        self.fields.push(new person("john", "cena"));
        self.fields.push(new person("abc", "def"));
    }
    self.remove = function(person) {
        self.fields.remove(person);
    }
}

ko.applyBindings(new personViewModel());
</script>
</html>

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

这是一个完整的解决方案。我做了一些修改。

查看

<a href="#" data-bind="click:addFields">ADDPerson</a> 
<br>
<a href="#" data-bind="click:resetPerson">Reset</a>
<br>
<div data-bind="foreach:fields,visible:show">
    <div data-bind="text:firstName"></div>
    <div data-bind="text:lastName"></div>
    <a href="#" data-bind="click:$root.remove">Remove</a>
    <a href="#" data-bind="click:$root.edit">edit</a>
</div>
<form data-bind="visible:showfields">First Name:
    <input data-bind="value:formFirstName" />Last Name:
    <input data-bind="value:formLastName" />
    <a href="#" data-bind="click:addPerson,text:actionTitle"></a>
</form>

型号

function person(firstName, lastName) {
    var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);
}

function personViewModel() {
    var self = this;
    self.formFirstName = ko.observable("add");
    self.formLastName = ko.observable("Value");
    self.show = ko.observable(true);
    self.showfields = ko.observable(false);
    self.flag = ko.observable(false)
    self.actionTitle = ko.observable('Add')
    self.editPerson = ko.observable()
    self.fields = ko.observableArray([
    new person("paul", "kerry"),
    new person("john", "cena")]);
    self.addFields = function () {
        self.show(false);
        self.showfields(true);
        self.flag(false)
        self.actionTitle('Add')
    };
    self.addPerson = function () {
        if (self.flag()) {
            self.editPerson().firstName(self.formFirstName())
            self.editPerson().lastName(self.formLastName())
            self.flag(false)
        } else {
            self.fields.push(new person(self.formFirstName(), self.formLastName()));
        }
        self.show(true);
        self.showfields(false);
    }
    self.resetPerson = function () {
        self.fields.removeAll();
        self.fields.push(new person("karan", "bhardwaj"));
        self.fields.push(new person("dipankar", "gupta"));
    }

    self.edit = function (person) {
        self.editPerson(person)
        self.formFirstName(person.firstName())
        self.formLastName(person.lastName())
        self.showfields(true)
        self.flag(true)
        self.actionTitle('Edit')
    }
    self.remove = function (person) {
        self.fields.remove(person);
    }
}

ko.applyBindings(new personViewModel());

Fiddle Demo

【讨论】：

当我单击编辑然后单击添加人员时，其中存在一个问题，然后它显示了我之前单击的人员的值。如果我想在编辑和取消中选择取消，我必须为此传递 null ？
这个你可以通过thispost
谢谢Raheel...我做到了:)

【解决方案2】：

以下是更新现有模型的方法：

创建新的可观察对象：

self.editForm = ko.observable(); //This will hold selected person object which you want to edit

为编辑创建新功能：

self.edit = function(person){

    self.editForm(person); //populate selected object to edit in edit form

}

连接 HTML：

<form data-bind="visible:showEdit, with: editForm">
    First Name: 
    <input data-bind="value:firstName"/>
    Last Name:
    <input data-bind="value:lastName"/> 
</form>

为什么要创建新的 observable？ -

回答 - 您所做的所有编辑都将实时更新，您无需点击 UPDATE 按钮 :-)

我希望清除..

更新了单一形式的演示： http://jsfiddle.net/rahulrulez/7f7hsj8w/2/

【讨论】：

我想使用相同的表单来添加和编辑功能
@user2142786 我已经更新了演示：jsfiddle.net/rahulrulez/7f7hsj8w/2 请检查 :-) 如果您认为我有帮助，请投票并检查作为答案。让我们帮助社区
嗨 Rahul，如果我点击编辑按钮，然后点击添加输入字段带有一些值，有两个问题。他们没有出现空白。其次，当我点击编辑时，没有保存 n 取消的选项
嗨，Rahul，还有一个问题要问你stackoverflow.com/questions/25306449/…

【解决方案3】：

如果您想就地编辑表单。有点像 asp.net webform 样式。

简单的方法是最初禁用输入。然后使用编辑按钮启用输入。希望这会有所帮助。

【讨论】：