Question

您好我正在使用淘汰赛js工作，我必须执行CRUD操作。除了更新（编辑）之外，我能够做到这一切。我想点击编辑同样的表格将打开，点击添加人员打开，但与人的值。这是我的代码

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

Answer 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

Answer 2

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

创建新的observable：

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>

为什么要创建新的可观察对象？ -

答案 - 您所做的所有编辑都会实时更新，您不必像按钮那样按UPDATE： - ）

我希望清除..

使用单一表单更新了演示： http://jsfiddle.net/rahulrulez/7f7hsj8w/2/

Answer 3

如果要编辑表单。有点像asp.net webform风格。

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

使用knockout js编辑表单中的功能

3 个答案:

Fiddle Demo