knockout.js demo

by refan

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div data-bind='component: {
    name: "phones-editor",
    params: { Phones: [], phonesTypes : ["Cep", "İş", "Ev", "Asistan"] }
}'></div>

JavaScript

< script type = "text/html" id = "phones-template" > 
<div class="control-group">
    <label class="control-label">Telefon <span style="color: #ff0000;">*</span>

    </label>
    <div class="controls">
        <select data-bind="options: selectedRow().customerPhones, optionsText: 'text', optionsValue : 'value', value: reservation().SelectedPhoneNumber"></select>
    </div>
</div>
<table>
    <thead>
        <tr>
            <th>
                <select data-bind="options: phonesTypes, value: secili, enable:  Phones().length < 4" class="input-small m-wrap"></select>
                <button style="height: 30px;" class="btn green pull-right" data-bind="click: addPhone, enable:  Phones().length < 4"> <i class="fa fa-plus"></i> YENİ TELEFON EKLE</button>
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Phones">
        <tr>
            <td>
                <div class="control-group"> <span data-bind="text:Type" style="float: left; width: 50px;"></span>

                    <select data-bind="options: $root.countryCodes, value: CountryCode" class="input-small m-wrap"></select>
                    <input data-bind="value:Number, valueUpdate:'afterkeydown'" type="text" class="input-small" data-mask="(999) 9999999" />
                    <button data-bind="click: $root.removePhone" class="btn btn-danger" style="margin-bottom: 11px;"><i class="fa fa-trash "></i>

                    </button>
                    <div class="control-group" style="display: none;" data-bind="visible: Type() == 'Asistan'">
                        <label class="control-label">Asistan Adı Soyadı</label>
                        <div class="controls">
                            <input data-bind="alfa: alfa, value: $root.AssistantFullName" type="text" class="input-medium" />
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td> <span id="telMessage"...