Question

Knockout.js的新手，我在拾取文本输入数据时遇到问题。我的表单上有这些字段，其中包含data-bind：text：

<label>First Name</label>
<input type="text" class="form-control margin-bottom-20" 
       data-bind="text: firstname">

<label>Last Name</label>
<input type="text" class="form-control margin-bottom-20" 
       data-bind="text: lastname">

<label>Email Address <span class="color-red">*</span></label>
<input type="text" class="form-control margin-bottom-20" 
       data-bind="text: email">

在我的.js页面中，我不确定是否应该声明Person函数的firstname，lastname，email .... inside或ousitde。我已经尝试了两种方式，而且var总是为空。我似乎无法让他们在文本框中提取值。表单上有一个提交按钮，用于启动该功能。

function submitclicked() {
    insertNewUser();

    ko.applyBindings(firstname);
    ko.applyBindings(lastname);
    ko.applyBindings(email);
    ko.applyBindings(password);
};

function Person() {
    var firstname = ko.toJSON();
    var lastname = ko.toJSON();
    var email = ko.toJSON();
    var password = ko.toJSON();

    this.FirstName = firstname;
    this.LastName = lastname;
    this.Email = email;
    this.Password = password;
}

function insertNewUser() {

    var person = new Person();

    $.ajax({
        url: "/api/Reg",
        type: 'post',
        data: JSON.stringify(person),
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            person(result);
        }
    })
};

我离开的任何想法？感谢。

Answer 1

首先，在这种情况下，建议只创建一个viewmodel并应用绑定一次。换句话说，您应该将绑定应用于人。

$(function() {
    ko.applyBindings(new Person());
});

除非您想要将淘汰赛模型转换为json，否则无需调用ko.toJSON（）。当表单更改时，您还需要将ko.observable（）用于您希望在模型中更新的任何内容。

另一个问题是在您的模型中，当您在视图中使用小写字母时，您使用的是大写字母。即名字与名字。它还建议使用self来帮助确定范围。

function Person() {
    var self = this;

    self.firstname = ko.observable();
    self.lastname = ko.observable();
    self.email = ko.observable();
    self.password = ko.observable();
};

然后要插入用户，您可以使用模型上的函数从模型中插入人物：

self.insert = function() {
    $.ajax({
        url: "/api/Reg",
        type: 'post',
        data: ko.toJSON(self),
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            person(result);
        }
    });
}

然后，您应该使用单击绑定将插入链接到按钮：

<button data-bind="click: insert">Add</button>

http://jsfiddle.net/cjcmR/2/

Knockout数据绑定：在Function（）中没有获取文本

1 个答案: