Knockout.JS声明变量为observable不能正常工作

时间:2013-05-24 22:13:01

标签: javascript knockout.js

我正在尝试将某些输入的变量声明为observable,但它无法正常工作。表单正确加载,但是当我提交表单时,值只是javascript代码。

这是表格

<div data-bind="visible: shippingBillingContact()">
    <table border="1">
        <tr><td>Full Name</td><td><input type="text" data-bind='value: fullName'/></td>
        <tr><td>Address Line 1</td><td><input type="text" data-bind='value: addressLine1'/></td>
        <tr><td>Address Line 2</td><td><input type="text" data-bind='value: addressLine2'/></td>
        <tr><td>City</td><td><input type="text" data-bind='value: city'/></td>
        <tr><td>State</td><td><input type="text" data-bind='value: state'/></td>
        <tr><td>ZIP</td><td><input type="text" data-bind='value: ZIP'/></td>
        <tr><td>Email</td><td><input type="text" data-bind='value: email'/></td>
    </table>
    <button data-bind="click: back">Go Back</button>
    <br>
    <button data-bind="click: submitOrder">Submit</button>
</div>

这是我声明变量的viewmodel。没有对他们进行其他处理

function EntryViewModel(fullName, addressLine1, addressLine2, city, state, ZIP, email) {
    var self = this;
    self.newItem = ko.observable("");
    //fullName through email are the items giving me problems
    self.fullName = ko.observable();
    self.addressLine1 = ko.observable();
    self.addressLine2 = ko.observable();
    self.city = ko.observable();
    self.state = ko.observable();
    self.ZIP = ko.observable();
    self.email = ko.observable();

    //these are used to show/hide divs (work properly)
    self.cartContents = ko.observable(true);
    self.shippingBillingContact = ko.observable(false);
    self.orderComplete = ko.observable(false);

    //start the array with some items
    self.itemNumbers = ko.observableArray([

    ]);

    //the values for ItemNumbers, quantities, prices, names are all looked up
    //I omitted this code because it in no way interacts with the customer information

    $.getJSON("/orders/submit_order/" + itemNumbers + "/" + quantities + "/" + prices + "/" + productNames + "/" + self.fullName + "/" + self.addressLine1 + "/" + self.addressLine2 + "/" + self.city + "/" + self.state + "/" + self.ZIP + "/" + self.email,function(data) {
            if(data.check == "success"){
                self.shippingBillingContact(!self.shippingBillingContact()); //hide the shipping form
                self.orderComplete(!self.orderComplete()); //show the order complete form and display the order
            }
            else{
                alert('Price Mismatch. If you believe this was an error please re-add the items');
                self.cartContents(!self.cartContents());
                self.shippingBillingContact(!self.shippingBillingContact()); //hide the shipping form
            }
        });

所以URL显示的是这样的。如您所见,项目信息显示得很好,但客户信息是一堆javascript。

orders/submit_order/1/1/5.99/ItemA/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D

我也尝试过以下变化,但都没有效果

self.fullName = ko.observable("");
self.fullName = ko.observable(fullName);

1 个答案:

答案 0 :(得分:5)

您必须将observable调用为函数:self.city()而不是self.city ...

相关问题