1

ノックアウト 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

You could also use the jQuery.payment https://github.com/stripe/jquery.payment to help you out with validation and mask input.There's a bindinghandler that you can use for your ko bindings that you can check here: https://github.com/stripe/jquery.payment/pull/123/files?short_path=04c6e90

This is how toy bind your html inputs:

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