Question

我正在尝试使用knockout.js创建付款表单，我需要动态更改页面，所以我不需要手动使用show和hide标签。问题是我无法使数据收集部分与我的模板代码一致。

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

Answer 1

您还可以使用jQuery.payment https://github.com/stripe/jquery.payment来帮助您进行验证和屏蔽输入。您可以使用绑定处理程序来进行ko绑定，您可以在此处查看：{{3} }

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

<input type="text" class="cc-exp" placeholder="MM/YYYY" data-bind="payment:{value:YourObservable ,format:'formatCardExpiry'}"

通过knockout.js转换表单

1 个答案: