使用 Knockout 扩展器扩展 observables

原文地址：http://knockoutjs.com/documentation/extenders.html

原文名称：Using extenders to augment observables

本文参照：http://www.cnblogs.com/haogj/archive/2013/06/11/3132150.html

在值发生变化的时候，Knockout 的可观察对象提供了基本的功能来支持读/写，以及通知订阅者。在有些情况下，你可能希望能为可观察对象添加一些功能. 包括增加一些属性，或者通过为可观察对象增加写入的附加处理， Knockout 扩展器提供了一种简单并且灵活的途径，支持实现参数化的可观察对象。

如何创建一个扩展器

创建扩展器涉及到为 ko.extenders 对象添加一个函数，在这个函数被调用的时候，可观察对象将作为第一个参数，其它的选项被作为第二个参数。函数既可以返回可观察对象本身，也可以返回通过某种方式创建的新的可观察对象。

下面是一个简单的例子，logChange 扩展订阅了主题对象，提供了一个可配置的提示信息，在可观察对象发生变化的时候，在控制台输出这个提示信息和可观察对象的最新值。

ko.extenders.logChange = function(target, option) {
    target.subscribe(function(newValue) {
       console.log(option + ": " + newValue);
    });
    return target;
};

通过在可观察对象上调用 extend 函数可以使用这个扩展，extend 的参数是一个对象，其中名为 logChange 的属性表示使用这个扩展，属性的值就是扩展函数的第二个参数的值。

this.firstName = ko.observable("Bob").extend({logChange: "first name"});

这样，如果 firstName 可观察对象的值修改为 Ted ，就会在控制台输出　first name: Ted.

示例1：强制输入数字

这个示例创建一个扩展强制对可观察对象只能提供带有指定小数位数的数字。在这里，扩展器创建了一个新的允许写的支持计算的可观察对象，注入在真正的可观察对象之前进行写入处理。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAACCCAIAAAA1/rxTAAAYtElEQVR4nO2dTW/bSJrHeaW+gNUfQBf3SW7fo+Smuw/KwcdVDvwIji+77YvU2AWSs9SYwaxiwAYG+5JMdqKBO5MG5FF6Jwl6405npttyz0pADxAq2bOc3gPfqsgiRVIknyryD/wOEsWXIpnw/2PVQ1pbmYuVOXe5Xi4CzFPhX88qBNEW05Gunen3qChU36/YDTDTMc8G+uMgyflKvXehUz4uF9fv59fv59fL+cf3C8mY50xZ90u2/c2ID1TME5JjY7SVufjzV49ZXjzNhT+HkNPmgHpY//zyhnw3N+OlZIQ1zzfxxR8fvwRAfp5VHU8L3l1OlGFWLcycodquoCXMWTYvJ2a8fw8mUIHlzCb3f0hXNCwzQvX1A6V5+ezxxw9zaIHsFB/PVLybJRMCaIFKzIoyA8W1AABCoAVqQJ7WRXM5MaEF5aOwfz/QAgDSEtCCH6nzHloALXDMwJf60ILyAC0AQFagBXJBH8YyEQx+aEFJYM7yRgMKiH8AsgaDCHJBnsSyAS0oFe6Z9X11Mx5aAAA10AK5II9hSWAPBbSgVLBacLnxPxVoAQBZAy2QC/I8loSgFljZDy1Qkployoz/DC0AQA6kry2gzmnEvwy84+XAAlogEZmfdF8Sx5wtNSHrz/v6C9UAEiKNFlDnNLRAcoISAC2QiDxOenRsl6JXAFoAJCR8EKFgP6DOaWiB/LwLlwP6XKw4eZzxCC0oy2ABnABISDwtmG0W+dACaEFG+P7ZmHACScjvpAe1oCgnKEwLyGMAAJZ4JYfQAmiBNAQ7DAA9uZ3u5azMWgCAhEALoAXqAS2QjqxOrmht3PuOCnQCaAGoJiItIKk6pM5paIFikAchYMnjtAZ/LdYJoAWgmoieRIAWQAuUgDwLgUvm59Q3PSSzEf8AZI6rBfOCXmdEnceI/1JxOTExmqB0/CdZv/1Hma8my6vAr3JrAXQEKMTLZ48/flhAC6AFykKelJWC+nQvGTkwLTlAbwEAmQItgBaoD3lYVgfycz2bmD4zgBYAkCnQAmhBKSDPy4pAfqIdsjUD8gsxAPIALUD8l4F3THS9yykRgUxaYIP4ByBroAXQghJBnpqlh/wUh8HG/wxaAEB6NtOCGbQAWiAZ5MFZbohO63LtPKwTzKAFAKTH1YLItxxCC6AFioARBKXjP5S1rbqaLKEFAGTBZlpQvfin0gLoSALIM7XEZHXMMzzX7FefB8w8G8hWC/LWDmgNIARaoIYWgGSQx6fqkJ/BeAgGF8LNAAAQB2gBtKCkkCerEpCfppzAfTYAaYEWQAvKC3noyg/5OcoH9jXJS2gBAEmAFiD+Sw157ioK+YnbGFYLlugzACA2G2nB75/+4R9/9bvuP58G+Yd/yYYukIl/+vXvfv/0D+RXfMgBtCCWFvAdBtACAOKwkRac//fr12/eXi8XIuYZIVy5hOS9v1nNvxGvv387/tO35Fd8mAHif/3pDv5dJeqrLQBKsKkW0MWkbMi2v7lowfVyDi2QIrYVif9lCLmcX36L3F5DCwCIzYZacJFf/BSlBWh/NbRgRh3wcupFSfHJh0BNnCtgtC7g/QGggkAL0P7KaMGMOpuhBUQIhcACMQ+Aj4204E/QgvK3v1xaMKOOZ8Q/HUIzgBYA4AO9BWg/tKBEkB9euYnoNgAAWGxecqhKfEILoAUO5OENXdiYsGJGt6ogosIRZgBABNACaEH1tGBGHdLQgs2IdoJoXfCvhPoSDIBsQAugBdCCEkF+YPMntRMIH4yEGQDgA1oALYhuJ7RAKcgPbP6kj/+IMQXqCzEA8uBqwTydFqxMKzzO7u1qW7rF9r1zJk6O95zp2tb+UBBI5wc39b1HymuBbO3JixAtGPWbWndQcEL0ujWtOxT/dCKezpMgcXtdXesOEi0y6je1G3dHMmjBSUerd3oJjm1wzYN2vWlMC5eAYKjnyMbXU7znACjJTxyb9haszPn18uz+rhf5q+O9LX373rnrBM5nSx18ZnB+cFPXtqAFimvB9LCRLHXy1YIIXUhtBhXTAhGnHa11OCqlEHgbIr9AA1A82WvB+cEt/dP7Tg/Banl2b1e7eXR2vZw/3Oc94HhvS9976Hy9ONre0rWbu9vQAsW1oNetNfrjgp0gIy2IKweSaUHCY5WJFphjo6W3Tws8xQV1ErCbI79AA1A8mWuBM45gpxqrBX44LRgaVkfC8R60QGktmB42mO7lXrfW6B+26zWtXmufuDPUNAtvoGFs3GBlgvlqZdhJx16E77vudZ1V3Tg0RPHvzeAGobcqsb7wkT9o1/X2iT/ae11d6941buhaXdfqPkV44k2vd3piLRDPwzG926g3jZO7DXs2rxk+KXG+Oge/32HWPOt12UZ6WmD0m+xsvDTYi3jHZ3rYcBdxOwmK7DAozAmWvi2SX6MBKJistWCxMucrJthW5wc3dc04FiTKw31ta/fgwheE0AK1tWDUb2o3vKjodfkgP+l4fmAO2p4ZRGuBJxC9bs1d/6i/40baqL+j1df3Foz6Ta8908OG0Ay8m+lLKyMb/Sdullufrax1cnrQ9uYZtBlL6HW91Ge0gJ3/ctRvis1gerdR112TYGcL0QJnkZa1yBOjZTXS3VnnsxX83iH1kt7ZinuCHDOYHjZYsRApYHm0AHIAKk3eWvBwX9va/1KQKOcHN/Xt++eBIIQWqK0FvS7bB8ClePBXJoCjtcAnFtYig7ZnGPYi67RgbLQ4Dxj1m6L7XauHYGYlbrt/t2Fls3X7PnWSmBkR8ILZbp6b7l5ng6cFJx1+NMGzjaAWuD0E/q2Ha0H7lOmf8PbO3angIIL709ho6cwhZea0rMI/ZDBoCyaWwglYOfC+kl+vASiAHLRgsTLtXLz4fHtr9+6FIN6Ght2FAC0ovxaEjhTMmIL2dYMI4qDa8Q8orNECn0mEVkc65RFPjBtNY2o1kovzsGAOFhD0unbkuz+NvN57nemuF2qB7QHxtMB/+x6lBZwMjY2W1SswaAcaxhztYMeAu2BJncBvBuTXawAKIJfeAnO+sksI9x4K4m1o6G61AbSg0lrghQ2RFoQU39lDIVO7n6DX1dsnXsAn0QKvJ4CrS4hTexhfC+7o2p0stIAdaPAF8/PDRr1pPPflZc5aQC4ErBmY0AJQEUK0IP17C1bmfGWe3fss5DnD470tXbt1dBYahBlrQd65mHS7qsZ/WPvH0yRaEH8QYdiur9MCc5hkEMGpYPAPIuyIi+amh436TrvbbPTH9tBAt9NeX/QXaxAhtJggpRY8MVrJewvEgwhc0QNDWG/BoF2vZTCIQJ76yeSA9wO8hwCoyk+xePXs8S8f5htqge0ED4Pht9YJoAWys1YLJieddcUEwpJDqziRqx9cpwVxSw7ZdBz1dzS3jyGs5NARCObpCetxAC/LQ7Ugdsmht7ivhmCNFjh75Ib0KVM/mEALIkoO2QdJnJ+EWpBVySF53ifWAvQcgBJQnBY8YN5jyL3Q8Oz+bmB6sOoQWiA167WAf/+dXwvMsAcUZ/btvv3c4HD9IAJrA+EPKDJbZHM06gFFZs3uhp4YN8I8QHT7vv4BRW4UX+AEkVow4R87TFNbwD6gyPeXcKUP7k8iAwgp2Cy7FkAOQEkosLdg7pBVtEML5CGGFpC9zihn1vX5FwH5QWAZG60sRhBM6rBPLQcwA6A2FFoQHYTQgrJqAdXLj/MHWsCQybuMyDN+EzPwPpBf3wFIAYkWrKAFldQCoj+VVBTQglk2fyqJPN0z6TPwdoT8Kg9AIqAF0IICtaDsQAs2hjzXMzcDPJIAFINGC0xBkMhB3logW3ugBZkCLdgY8lDPRAt8fkB/oQdVJizak86ftRbYxYaeFhRUeChbzOfdTlmoqBZYIP4TQh7kuSqCt4/k8QCqSbyYT8qrZ49/2ex1RtACaEGVgBYkgTy8oQWgzKiiBStzUYgZQAugBUQg/mNDHt4FaIEJMwBUyK0Fc2gBtKBCuBkPLRBBntk0ZgA5AAUjpxa8/u6t2AxyT1xoQbb7G2vxi+/fQgts0mlBNXSBPLBJzMDbcfK0ABVBQi24fPPN9H++F/NaDZ6DhFx+/w156kgEtEAEeVpTmYE3nTwwQBWQUAvWMLOx/sO8SwX5BQ6AKKod/2GQRzWVGXDTyTMDlB5oAQByUfleAZf1d88VwAx+Jo8NUG4k1IKL8/86+4/f/ttvfiXmX4F0/PtoI776z99+N31MHkISwea9BFpAHo1AAHl4ANXJJ/5z0YKfXn/78w9vVuZCRLC6LV2JH1WpnSolhIXy849vfvj2BX0YS4VMvQL0EQiEkOcKUBq1tCDECRai9xpBC8oAtEAMtABEQx4tQF2gBdACmYEWiIEWgLWQpwtQlHJpwTwQqNCCYsir/dCCKOicgD7zAI/47JAHDFCR0mhB4O8sQwugBSAXyCMQWARPh/gEkccMUIvSacGcDyRoAbSg7BTbYUCehcBFeEZM4WfypAEKUSotMNmUklMLqNoDLQDZQJ6FwCX6jPhPGXnYAFUg0oJFOi24tv4wUgDnzyouVuZiJXXMI/6TrR9aIAPZxlh+668aiY8ned4AEoqN+VRaMM9DC8JeYAAtkFML4h4ZaIEMkMUYyBzyiALFQx38xfYWPNjb+uzgwlysXDl4sLelazb7X3JRdOz+tH3/fG1und3f1W4dnbkxdnG0Xa9pHrsHF9ACMi0Y9Xe07rDgdOx1a2Eb7Z0mbkyKRWLg1RmM+k2tdThKt6d3dO3OIIvYHhutWqM/tr+GbKvxxXiDTYCkkKcUKBjq4C9QCywD+Ozggpuyfe/cSp2z+7va1v6QcQLHBo73tvS9R5G5dXG0vaVzWvBoX6vvD9FbIIMWTA8b9U6vWCeI0IIIXUi6qiRcRc+wiRb4SZ9A67VgYg7a9abxnDwsJSD74x8GeVCBIqEO/oK04OG+tqVrNz/bZrXg4b62tT+06gyulws2/h/tsxl/dn9XM47DQ+v84Ja+fWvXv8ito7PKaEHe7d9EC3rdWqM/LswG1mY5nRa45KYFm8YPrwUhjL5oancG9KlcOcjjChQDdfAXogXnBzf1vYfm4uJzTgvYCkSfFvD4Bgh8DA1dM4598wyNmmYc5+QE0IIEWjA9bNR3jCmrCIftek2r19on7gzOWE/X7Ql38in49bSj1Tu9044zPOSt3M5va3rr0BBluTeD24HhrUqsL9wi1taFusDt6bBd91rChD2nBaN+U6vrWl3X6h2D14JeV3d+arI7yLSWaYY1iLC0D47Rb3qbXo6NFrN3Tsb07rBDbO7dP6sF3oKav3sAHQZUkCcWKADq4C+ot8BCoAVLVwvmj/a1rd2Di0AmXRxtRwwiPNq3hh54LTg/uJVjYQG0IL4WjPo72g027fggP+l4fmAO2p4ZRGuBF8a9rpe7o/6OG5aj/g47W9it/6i/47VnetiIMAN7kWG7XmufMtnPbt36zK1nbLRq4m6A044X+Scdra47s42Nlu4Z0gkz2/Sw4XzudWtuPQGvBTXnVn7QZhPd2tzz2WTp9EzYSeO00PlsaUHvjrse3/zWbKgwoII8tEDeUAe/NFpwfnBL/9RfWuhUHYZ2FXgdDLwWHO/Va9v3z524Ot6TteSw6NguXAt83e+9bs1vCWxyn7j34tFawIiFd/vOBraTx2u0wLcVJtrD98L7fNrRuodGy2qMtyr/Svj+kpDukFmvqzNWwZVi9Lq2LY36TaZDhZmB0wLvPp6N9snzw0bILT6T+q4WjI1WLWKkgFszKAzrjNPnFsgV6uCPqQWpX2c0Z3G0IBgzXxq6ZjwIiy6+GtGDHSmILiZYO6ZQ2G29omymBYOQr/5onJjDdt2fsiItYFLT/RpI3xi1BT6TCK2O5FZ12rHye9TfafTHTuWE2/LgdsdGi9+KaNOjftMWJqvngMPO4LAw9qZbRyM4fSnSAm88Qme0QLcHEU472ic17ZOa9olAJkZf+PoPQIGY1gfy9AIbQh3wG2hBdu8t8HoLAk5w8/NgojOxJCw7ON7jHkGMGi+AFmQc/zlpgRftRFrgW7lwVfaGxnY/wWlH6w4np7fdHoLAdgNbidSCUb/pb4OTB1lpwcguPnC+ftHktIAbHRgbLYEcQAvkgDzYwCZQB7ysWvBgb4tzgjl/6x+pBVyMcb0FF0fbvB8MDXZMAVogiRb4vzKp7NOCYbu+TguKGkSwl+p2Gvacw3b9dttXr5BmEKHG9BbwZYZODIz64kcAEmqB/3GD3h09XAssxkarxk7HIAI91j8MkzzbQGqoA15KLfA7gasFi4ujT5nyw4gnEcRacH1+cMtXW7DmHQbkeSwJmWvB5KTDF9jzHmCVHLIVfOwQPl8/uE4L4pYcsrEds+TQl/T8yu2Kfc9I4pYc3vY2fXpbq7tVF2OjpTOLDNruQwS+O37nfj2FFnDlhPWgFoyNls4ty/UW+C0BEOD5Inm8gXRQB7yEWnB27zPNe8Uh90JD+47fnS56IUGkFthm4IwsrH+vEXkebxjb8mqB9fYb5gFFf9Ec94Cif0jeebJuuH4QgQ3s8AcUmS26kbzmAUXBItPDBuMBo/6OVr/NDz2EPaAYNANrttsGZx5jo+XVFnAvEmAfUHQmJq8tGHDN8woV2d6CQduuLahpn9Tap0wg+S0BUIM+AyWhDviNtODaXLzI9G8ihIXKyh9OuccYtCB3LSB7nVFJII+cAHidkayQ5xxIBHXAQwugBVRaQPXyY/WwLu6ya8Ggja4COUGfgWJQBzyRFiQMFeu9RtCCkmlB+AP3gDeAK+f6Lq8W9O6gqkBCriZL6+2Z5FEH4kMd8JJpQeQfXA4EXoo4Vz3+qfQiJy0ASbiaLGNqRMXI6jhU4niSZx5woQ5ytbXgemlpAZtb6WJedS2QvVcAWpAjV1HRVdoYiwGOQzLI4xBYUAe58lpwDS3Isv15xT+0ICchcIlIwcrGIY5DMsjjEFhQB3kptIB7OzK0AFpQGdy/rxjPDOiDp1hwHNZwFTIR0EId5OprwdLSAp8ZQAuybT+0QIL4j0FEFiIOgZ+r8OmAEOogV1wLTKe3gDMDaAG0oFzE1gK78wBaAOJghVDET4AE6iCXSwt+/uFNYi1YQgsybH9e8S/k7z++gRZkqQUzr89gCS0Aa3FzKPpXUDDUQS6RFvz8l2/+9pfvhPxvCH97632ImK38/FVV/v7Xb+hDV36SaIF7lYcWgDX40ijOPCDDmK+QFiy0lTlP8TcRMsG8pL6CA5A5iQYR+As9ux76HAJSERZLceYBm2tBNfC0IEVvAbQAADEJtcAdR1jy66HPISAV0AJoQWFakG4QITMzIL+IA5AtybVAaAb0OQSkAloALaiKFsAMQMlIpQUmc3G31kOfQ0AqkmpBxCIAWgAtACB70sV/jApEa/30OQSkAloALaiIFmAcAahKtlrADyiY5CEEZCOpFsAMoAXQAgAKJSctmE1M8gQCEpJCC2AG0AJoAQDFkZsTuKMJAHik0wIALUijBcv5i6eUWgAzAFKT22DBmqGEq8mSfN83gD5HJSdOzCPyEf/QAgCkg1QL1DUD+tyVHGgBtEA+ZNICmAGQFjotMFU2A/rclRxoAbRAPiTSAnQYAHkh7C1Q2Qzoc1dyoAXQAvmQSwtgBkBSiLSANQNLDugPRRLoc1dyoAXQAvmAFgAQAzotUNoM6HNXcqAF0AL5gBYAEANSLVDXDOhzV3KgBdAC+YAWAMBAHf9rzcD2A/IDFQ/63JUcaAG0QD6K1gIzHJgBoCerFA9Zf5ZXtCT7lTSusjqe9LkrCclPLrQgDdSBWg5efQ0tAMClwDv+TUg6lJCVFtDnq6KQ52VFoA7UciCRFpjsPOTxAKqJOlqQyAygBdCCSkAdqOUAWgAAgypaMHPWFm+/oAXQgkpAHajlQEYtgBkAMlTRAmZt0XtEn4ilhDz/gBDqQC0HkmrBO2gBIEFFLQg3A/r4LCvk+QeEUAdqOYAWAMCglBZwzCZLfl/os7PEkOcfEEIdqOVAXi14R54QoMQoEv9hBLcV7DOgz06FIM8zkAnUgVoOHC0w5y++SqMF0TGfAv9qyfMDKE3O8R+23awuc4m1YzZZCtsDoAXFYEVLMVsB+fDy2eOPH+ZyaYEJLQBZkbcWFD9YELl+8wpaAC2gBlqgOK++fvyLVFrghzxXgNJUTwuEZkCfu5JDHqUgEdTBWW6gBaDUVE8L7M/8caDPXckhzzmQCOrgLDfQAlBqFNeCpLCbZo8Dfe5KDnnOgURQB2e5gRaAUlM9LTDZz85xoM9dySHPOZAI6uAsN5wWvPjq8YunIBV/VJuXIWS1HkDM04wg3xEgM8+IeQXS8bUfWwtslgvJmDuETY8J+Y6oyft5Jnx8v5CMeUaQ74hwv7iJ1+/nH5eLhMxDSLqeEMLaHzp/Wc9X3v8+Mz8OwmWddX6Yf/ywIOSXD/MQFiCK/xPw/1JLxhz6PY0CAAAAAElFTkSuQmCC" alt="" />

视图的源代码显示如下：

<p><input data-bind="value: myNumberOne" /> (round to whole number)</p>
<p><input data-bind="value: myNumberTwo" /> (round to two decimals)</p>

View model 源代码：

ko.extenders.numeric = function(target, precision) {
    //create a writeable computed observable to intercept writes to our observable
    var result = ko.computed({
        read: target,  // 返回源对象的值
        write: function(newValue) {
            var current = target(),
                roundingMultiplier = Math.pow(10, precision),
                newValueAsNum = isNaN(newValue) ? 0 : parseFloat(+newValue),
                valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

            // 如果发生变化了，写入源对象
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                //if the rounded value is the same, but a different value was written, force a notification for the current field
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    });

    //initialize with current value to make sure it is rounded appropriately
    result(target());

    //return the new computed observable
    return result;
};

function AppViewModel(one, two) {
    this.myNumberOne = ko.observable(one).extend({ numeric: 0 });
    this.myNumberTwo = ko.observable(two).extend({ numeric: 2 });
}

ko.applyBindings(new AppViewModel(221.2234, 123.4525));

示例中2：为可观察对象添加验证

这个示例为可观察对象添加一个必须提供的验证扩展。不会返回新对象，这个扩展为可扩展对象添加了一个子可观察对象。由于可观察对象实际上是一个函 数，可以拥有真正的属性。然而，当视图模型转换为 JSON 的时候，子可观察对象将会被丢弃掉，而留下真正的可观察对象的值。对于仅仅与 UI 相关而不需要发送回服务器的情况，是一个不错的添加功能的方式。

视图代码如下：

<p data-bind="css: { error: firstName.hasError }">
    <input data-bind='value: firstName, valueUpdate: "afterkeydown"' />
    <span data-bind='visible: firstName.hasError, text: firstName.validationMessage'> </span>
</p>
<p data-bind="css: { error: lastName.hasError }">
    <input data-bind='value: lastName, valueUpdate: "afterkeydown"' />
    <span data-bind='visible: lastName.hasError, text: lastName.validationMessage'> </span>
</p>

拓展和视图模型的实现：

ko.extenders.required = function(target, overrideMessage) {
    // 添加子可观察对象
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();

    // 执行验证的函数
    function validate(newValue) {
       target.hasError(newValue ? false : true);
       target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
    }

    // 初始验证
    validate(target());

    // 当值发生变化的时候进行验证
    target.subscribe(validate);

    // 返回源可观察对象
    return target;
};

function AppViewModel(first, last) {
    this.firstName = ko.observable(first).extend({ required: "Please enter a first name" });
    this.lastName = ko.observable(last).extend({ required: "" });
}

ko.applyBindings(new AppViewModel("Bob","Smith"));

应用多个扩展

也可以对可观察对象应用多个扩展。

this.firstName = ko.observable(first).extend({ required: "Please enter a first name", logChange: "first name" });

在这个例子中，可观察对象应用了两个扩展。