Knockout.JS，模板都是通过表单不添加数据的

Knockout.JS , templates are through form no data added

本文关键字：表单 添加 数据 JS Knockout      更新时间：2023-09-26

我是Knockout的新手，在向视图中添加模板时遇到了问题。到目前为止，我正在使用Jquery和Knockout来制作一个小程序，在这个程序中，您可以填写表单，并向对象数组添加一行。我使用了以下代码，但我不明白为什么新制作的模板没有复制我传递给他们的信息。当我使用标题中的表格（它弹出）时，我填写信息并按添加，会添加新的模板，但其中没有信息。你能帮我吗？

<body>
<div class="header" data-role="header">
<a href="#add_popup"  data-rel="popup" data-transition="slide" data-role="button" class="ui-btn-right" data-icon="plus">Add a friend...</a>
</div>
<div class="page">
<div class="profiles">
<div data-bind="template: { name: 'person-template', foreach: friend }">
</div>
</div> 
</div>
<div data-role="popup" id="add_popup" class="function_popup"  data-overlay-theme="b" data-position-to="window">
<h3>What is your friends information?</h3>
<form data-bind="submit: addFriend">
    Add task: 
    <input data-bind="value: newfirstName" name="firstname" placeholder="First Name..." / required>
    <input data-bind="value: newlastName" name="lastname" placeholder="Last Name..." / required>
    <input data-bind="value: newJob" placeholder="Job Title" / required>
    <input data-bind="value: newUrl" type="url" placeholder="Facebook Link" />
    <input data-bind="value: newTelephone" type="tel" placeholder="Telephone Number" />
    <input data-bind="value: newCity" placeholder="City" / required>
    <input data-bind="value: newCountry" placeholder="Country" / required>
    <button type="submit">Add</button>
</form>
</div>
<script type="text/html" id="person-template">
    <div class="friend">
    <h3 data-bind="text: firstName + ' ' + lastName"></h3>
    <img class="friend_pic" src="profile.jpg" /></a>
    <p><span data-bind="text: job"></span></p>
    <p><span data-bind="text: city +','+ ' ' + country "></span></p>
    </div>
</script>
<script type="text/javascript">
function Friend(data) {
this.newfirstName = ko.observable(data.newfirstName);
this.newlastName = ko.observable(data.newlastName);
this.newJob = ko.observable(data.newJob);
this.newUrl = ko.observable(data.newUrl);
this.newTelephone = ko.observable(data.newTelephone);
this.newCity = ko.observable(data.newCity);
this.newCountry = ko.observable(data.newCountry);
}
function ViewModel() {
    this.friend = ko.observableArray ([
         { firstName: 'Franklin', lastName: 'Johnson', job: 'Marketeer', url:'http://www.facebook.com', telephone: '+31654673995', city:'London', country:'UK'},
{ firstName: 'John', lastName: 'Richards', job: 'Banker', url:'http://www.facebook.com', telephone: '+4551891791', city:'Atlanta', country:'USA'}]);
this.newfirstName = ko.observable();
this.newlastName = ko.observable();
this.newJob = ko.observable();
this.newUrl = ko.observable();
this.newTelephone = ko.observable();
this.newCity = ko.observable();
this.newCountry = ko.observable();
};
this.addFriend = function() {
        this.friend.push(new Friend({ firstName: this.newfirstName(), 
                           lastName: this.newlastName(), 
                           job: this.newJob(), 
                           url:this.newUrl(), 
                           telephone: this.newTelephone(), 
                           city:this.newCity(), 
                           country:this.newCountry()}));
        this.newfirstName("");
        this.newlastName = ("");
        this.newJob = ("");
        this.newUrl = ("");
        this.newTelephone = ("");
        this.newCity = ("");
        this.newCountry = ("");
 };
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
addFriend函数是在视图模型之外定义的。把它移回里面。此外，您使用this会引起问题。带有addFriend的代码移回了视图模型中，这个/self/var修复了： 
<script type="text/javascript">
function Friend(data) {
    var self = this;
    self.firstName = ko.observable(data.newfirstName);
    self.lastName = ko.observable(data.newlastName);
    self.job = ko.observable(data.newJob);
    self.url = ko.observable(data.newUrl);
    self.telephone = ko.observable(data.newTelephone);
    self.city = ko.observable(data.newCity);
    self.country = ko.observable(data.newCountry);
}
function ViewModel() {
    var friend = ko.observableArray([{
                    firstName : 'Franklin',
                    lastName : 'Johnson',
                    job : 'Marketeer',
                    url : 'http://www.facebook.com',
                    telephone : '+31654673995',
                    city : 'London',
                    country : 'UK'
                }, {
                    firstName : 'John',
                    lastName : 'Richards',
                    job : 'Banker',
                    url : 'http://www.facebook.com',
                    telephone : '+4551891791',
                    city : 'Atlanta',
                    country : 'USA'
                }
            ]);
    var newfirstName = ko.observable();
    var newlastName = ko.observable();
    var newJob = ko.observable();
    var newUrl = ko.observable();
    var newTelephone = ko.observable();
    var newCity = ko.observable();
    var newCountry = ko.observable();
    var addFriend = function () {
        friend.push(new Friend({
                firstName : newfirstName(),
                lastName : newlastName(),
                job : newJob(),
                url : newUrl(),
                telephone : newTelephone(),
                city : newCity(),
                country : newCountry()
            }));
        newfirstName("");
        newlastName = ("");
        newJob = ("");
        newUrl = ("");
        newTelephone = ("");
        newCity = ("");
        newCountry = ("");
    };
    return {
        friend: friend,
        newfirstName: newfirstName,
        newlastName: newlastName,
        newJob: newJob,
        newUrl: newUrl,
        newTelephone: newTelephone,
        newCity: newCity,
        newCountry: newCountry,
        addFriend: addFriend
    };
};
ko.applyBindings(new ViewModel());
</script>
相关文章：