Knockout.JS ，模板通过表单不添加数据答案

【问题标题】：Knockout.JS , templates are through form no data addedKnockout.JS ，模板通过表单不添加数据
【发布时间】：2015-06-07 10:54:37
【问题描述】：

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

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

【问题讨论】：

这里有很多标记/代码 - 你能reduce the problem down to perhaps one or two properties/inputs - 不必滚动代码将有助于处理正在发生的事情。

标签： javascript jquery templates knockout.js data-binding

【解决方案1】：

addFriend 函数是在您的视图模型之外定义的。把它移回里面。此外，您对this 的使用会引起问题。带有 addFriend 的代码移回视图模型，并且 this/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>

【讨论】：