Question

我正在尝试学习knockout.js，并试图制作我自己的代码，这就是我想出的。这是一个酒店套餐提案，用户点击添加酒店，并出现与酒店相关的文本框。我还希望在文本框中显示初始化数据。我用这个作为参考。

http://knockoutjs.com/examples/contactsEditor.html

现在，文本框没有显示初始数据，当我点击添加酒店时代码中断

我的淘汰赛代码

function Proposal(details,fee, hotelproposal) {
    var self = this;
    self.details = details;

    self.fee = fee;
    self.hotelproposal= ko.observableArray(hotelproposal);
}

function hotel(hotelname,checkin,checkout,roomtype, viewtype){
    self.hotelname=hotelname;
    self.checkin=checkin;
    self.checkout=checkout;
    self.roomtype=roomtype;
    self.viewtype=viewtype;
}

// Overall viewmodel for this screen, along with initial state
function ProposalViewModel() {
    var self = this;
    self.info=ko.observable( new Proposal("these are the details", 1200,[new hotel("Hilton","202020","202020","double", "city") , new hotel("Hilton2","2020201","2020201","triple", "sea")]));   

    self.addhotel = function(hotel) {
        self.info.Proposal.hotelproposal.push({
            hotelname:"",
            checkin:"",
            checkout:"",
            roomtype:"",
            viewtype:""
        });
    };
}

ko.applyBindings(new ProposalViewViewModel());

我的HTML代码：

<h2>Proposal</h2>
<div >
    <table>
        <tr>
            <th>Details</th>

            <th>fee</th>
            <th>Hotels</th>

        </tr>
        <tbody data-bind="foreach: info">
            <tr>
                <td>
                    <input data-bind='value: Proposal.details' />

                </td>

                <td><input data-bind='value: fee' /></td>
                <td>
                    <table>
                        <tbody data-bind="foreach: info.hotelproposal">
                            <tr>
                                <td><input data-bind='value: hotelname' /></td>
                                <td><input data-bind='value: checkin' /></td>
                                <td><input data-bind='value: checkout' /></td>
                                <td><input data-bind='value: roomtype' /></td>
                                <td><input data-bind='value: viewtype' /></td>


                            </tr>
                        </tbody>
                    </table>
                    <a href='#' data-bind='click: $root.addhotel'>Add hotel</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

此代码无效。有人能指出什么是错的吗？

如何使用knockout js完成以下操作？

0 个答案: