Knockout/Basic1

by MKGaru

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.js"></script>
<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/v2.1.0/dist/knockout.validation-with-locales.js"></script>
<h1>User Info</h1>

<user-info params="name:'田中',age:25"></user-info>
<user-info params="name:'高橋',age:34"></user-info>

JavaScript

function UserInfo(options){
    this.name = options.name;
    this.age = options.age;
    this.gender = options.gender;
    this.married = options.married;
    ko.track(this);
    Object.defineProperties(this,{
        _name:{
            enumerable:false,
            value: ko.getObservable(this,'name').extend({
                required:{ message:"氏名は必須です。" }
            })
        },
        _age:{
            enumerable:false,
            value: ko.getObservable(this,'age').extend({
                min:3
            })
        }
    });
}

ko.components.register('user-info',{
    viewModel: function(params){
        return new UserInfo(params)
    },
    template: 
    	'<dl>'+
    	'  <dt>氏名</dt><dd><input type="text" data-bind="value:_name"></dd>'+
    	'  <dt>年齢</dt><dd><input type="number" data-bind="value:_age"></dd>'+
    	'</dl>'
});
ko.validation.locale('ja-JP');
ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
}, true);
ko.punches.enableAll();
ko.applyBindings();