1

我正在尝试使用 knockout.js 创建付款表单，我需要动态更改页面，因此我不需要使用显示和隐藏标签手动执行此操作。问题是我无法让数据收集部分与我的模板代码一致。

<div id="users-create" data-bind="template:'payForm'"></div>​

<script type="text/html" id="payForm">
<div id="content">
    <form data-bind='submit: saveUser'>
    <div> 
        <label for="name">
            name</label>
        <input id="namebox" type="text" name="firstname" class="required" data-bind="value: newUser().Name" />
    </div>

    <div>
        <label for="credit card">
            creditcard</label>
        <input id="cc-num" type="text" name="credit" class="required" data-bind="value: newUser().credit" />
    </div>

    <div style="margin-top:10px">
    <p><label for="Expiration Date">
            expiration date</label>
        <select id="monthbox" name="month" class="required" data-bind="options: Month, value: newUser().Month"></select> /
                <select id="yearbox"  name="year" class="required" data-bind="options: Year, value: newUser().Year" ></select>

    </p>
    </div>

    <div class="form-submit">
        <input type="submit" value="checkout" />
    </div>
    </form>
    </div>
</script>
<script type="text/html" id="confirmForm">
<div id="content">
<h1>Home Page</h1>
there should be a price and a confirmation that pops up after this.
</div>

</script>

这是我的淘汰赛脚本

<script type="text/javascript">
var User = function () {    // it's your viewmodel
this.Name = ko.observable();
this.credit = ko.observable();
this.Month = ko.observable();
this.Year = ko.observable();
};

var UsersPage = function () {
var self = this;
self.Month = ko.observableArray(['1','2','3','4','5','6','7','8','9','10','11','12']);
self.Year = ko.observableArray(['2012','2013','2014','2015','2016','2017','2018','2019','2020','2021','2022','2021']);

self.users = ko.observableArray([new User()]);
self.newUser = ko.observable(new User());
self.saveUser = function () {
    alert(ko.toJSON(self.newUser()));
};

};

var myTemplates = function() {
this.template = ko.observable("payForm");
this.getTemplate = function(data) {
  return data.template();
};

this.toggle = function() {
this.template(this.template() === "payForm" ? "confirmForm" : "payForm");    
};

};

var main = {
  templates: new myTemplates(),
  users: new UsersPage(),
}

ko.applyBindings(new UsersPage());
</script>
4

1 回答 1

0

您还可以使用 jQuery.payment https://github.com/stripe/jquery.payment来帮助您进行验证和掩码输入。有一个 bindinghandler 可用于您的 ko 绑定，您可以在此处查看：https： //github.com/stripe/jquery.payment/pull/123/files?short_path=04c6e90

这是玩具绑定您的 html 输入的方式：

<input type="text" class="cc-exp" placeholder="MM/YYYY" data-bind="payment:{value:YourObservable ,format:'formatCardExpiry'}"
于 2015-05-27T22:34:50.673 回答