Last active
December 15, 2015 15:38
-
-
Save AlbertoMonteiro/5282985 to your computer and use it in GitHub Desktop.
Exemplo de minicrud, em funcionamento: http://jsbin.com/ilalet/1/edit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Pessoa(data) { | |
this.Nome = ko.observable(data ? data.Nome : ""); | |
this.Idade = ko.observable(data ? data.Idade : ""); | |
this.Nascimento = ko.observable(data ? data.Nascimento : ""); | |
this.toString = function () { | |
return this.Nome(); | |
}.bind(this); | |
} | |
function vm() { | |
var self = this; | |
self.pessoas = ko.observableArray(); | |
} | |
ko.bindingHandlers.minicrud = { | |
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { | |
var listGetter = valueAccessor(); | |
var list = ko.utils.unwrapObservable(listGetter); | |
var allBindings = allBindingsAccessor(); | |
var type = allBindings.itemType; | |
var minicrudState = function () { | |
var self = this; | |
self.isNew = ko.observable(true); | |
self.selectedIndex = ko.observable(null); | |
self.currentItem = ko.observable(new type()); | |
self.editVisible = ko.observable(false); | |
self.deleteVisible = ko.observable(false); | |
self.clearVisible = ko.observable(true); | |
self.data = listGetter; | |
self.window = { | |
isOpen: ko.observable(false), | |
title: ko.computed(function () { | |
return self.isNew() ? "Nova pessoa" : self.currentItem(); | |
}), | |
open: function () { | |
if (!self.isNew()) { | |
var item = ko.mapping.fromJS(ko.toJS(self.data()[self.selectedIndex()])); | |
self.currentItem(item); | |
} | |
this.element.data("kendoWindow").center(); | |
}, | |
close: function () { | |
//self.resetCurrentItem(); | |
}, | |
save: function () { | |
if (self.isNew()) { | |
var obj = new type(ko.toJS(self.currentItem())); | |
self.data.push(obj); | |
} | |
else { | |
var itemToChange = self.data()[self.selectedIndex()]; | |
var item = ko.toJS(self.currentItem()); | |
self.currentItem.notifySubscribers(); | |
for (var prop in item) { | |
if (ko.isObservable(itemToChange[prop])) | |
itemToChange[prop](item[prop]); | |
} | |
var grid = $(".minicrud-grid", element).data("kendoGrid"); | |
grid.select(grid.table.find("tr").eq(self.selectedIndex())); | |
} | |
self.window.isOpen(false); | |
}, | |
cancel: function () { | |
self.window.isOpen(false); | |
} | |
}; | |
self.resetCurrentItem = function () { | |
var item = new type(); | |
for (var prop in item) { | |
if (ko.isObservable(item[prop])) | |
self.currentItem()[prop](item[prop]()); | |
} | |
}; | |
self.selectionChanged = function () { | |
self.isNew(false); | |
self.selectedIndex(this.select().index()); | |
}; | |
self.list = ko.computed(function () { | |
return self.data().length === 0 | |
? ko.observableArray([self.currentItem]) | |
: self.data; | |
}, self); | |
}; | |
var minicrud = new minicrudState(); | |
ko.applyBindingsToDescendants(minicrud, element); | |
$(".minicrud-new", element).click(function () { | |
minicrud.isNew(true); | |
if (minicrud.data().length === 0) { | |
var obj = new type(ko.toJS(minicrud.currentItem())); | |
minicrud.data.push(obj); | |
} | |
minicrud.resetCurrentItem(); | |
minicrud.window.isOpen(true); | |
}); | |
$(".minicrud-edit", element).click(function () { | |
minicrud.isNew(false); | |
minicrud.window.isOpen(true); | |
}); | |
$(".minicrud-delete", element).click(function () { | |
listGetter.remove(list[minicrud.selectedIndex()]); | |
}); | |
$(".minicrud-clear", element).click(function () { | |
listGetter.remove(list[minicrud.selectedIndex()]); | |
}); | |
ko.utils.domData.set(element, "__ko_withIfBindingData", {}); | |
return { 'controlsDescendantBindings': true }; | |
}, | |
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { | |
} | |
}; | |
$(function () { | |
ko.applyBindings(window.vc = new vm()); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> | |
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" /> | |
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" /> | |
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" /> | |
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.metro.min.css" rel="stylesheet" type="text/css" /> | |
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script> | |
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script> | |
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script> | |
<script src="https://gist.github.com/AlbertoMonteiro/5282985/raw/71f98b4a040ff9e4ce323e6b10930afffe4fba6f/knockout.mapping.js"></script> | |
<script src="app.js"></script> | |
<title>Minicrud</title> | |
</head> | |
<body> | |
<div class="minicrud" data-bind="minicrud: pessoas, itemType: Pessoa"> | |
<div class="minicrud-single" data-bind="with: list()()[0], visible: data().length <= 1"> | |
<label>Nome</label> | |
<input type="text" data-bind="value: Nome" class="k-input" /> | |
<br /> | |
<label>Idade</label> | |
<input type="text" data-bind="value: Idade" class="k-input" /> | |
<br /> | |
<label>Nascimento</label> | |
<input type="text" data-bind="kendoDatePicker: Nascimento" /> | |
</div> | |
<div data-bind="visible: data().length >= 2"> | |
<table class="minicrud-grid" data-bind="kendoGrid: {data: data, selectable:true,change: selectionChanged, resizable:true}"> | |
<thead> | |
<tr> | |
<th data-field="Nome">Nome</th> | |
<th data-field="Idade">Idade</th> | |
<th data-template="#=kendo.toString(Nascimento,'dd/MM/yyyy')#">Nascimento</th> | |
</tr> | |
</thead> | |
</table> | |
</div> | |
<div class="minicrud-window" style="display: none" data-bind="with: currentItem, kendoWindow: { isOpen: window.isOpen, title: window.title, modal: true, resizable: false, open: window.open, close: window.close }"> | |
<label>Nome</label> | |
<input type="text" data-bind="value: Nome" class="k-input" /> | |
<br /> | |
<label>Idade</label> | |
<input type="text" data-bind="value: Idade" class="k-input" /> | |
<br /> | |
<label>Nascimento</label> | |
<input type="text" data-bind="kendoDatePicker: Nascimento" /> | |
<br /> | |
<button class="k-button" data-bind="click: $parent.window.save">Salvar</button> | |
<button class="k-button" data-bind="click: $parent.window.cancel">Cancelar</button> | |
</div> | |
<div class="minicrud-actions"> | |
<button class="k-button minicrud-new">Novo</button> | |
<button class="k-button minicrud-edit" data-bind="visible: data().length >= 2">Editar</button> | |
<button class="k-button minicrud-delete" data-bind="visible: data().length >= 2">Excluir</button> | |
<button class="k-button minicrud-clear" data-bind="visible: data().length <= 1">Limpar</button> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// Knockout Mapping plugin v2.4.1 | |
/// (c) 2013 Steven Sanderson, Roy Jacobs - http://knockoutjs.com/ | |
/// License: MIT (http://www.opensource.org/licenses/mit-license.php) | |
(function(e){"function"===typeof require&&"object"===typeof exports&&"object"===typeof module?e(require("knockout"),exports):"function"===typeof define&&define.amd?define(["knockout","exports"],e):e(ko,ko.mapping={})})(function(e,f){function y(b,c){var a,d;for(d in c)if(c.hasOwnProperty(d)&&c[d])if(a=f.getType(b[d]),d&&b[d]&&"array"!==a&&"string"!==a)y(b[d],c[d]);else if("array"===f.getType(b[d])&&"array"===f.getType(c[d])){a=b;for(var e=d,l=b[d],n=c[d],t={},g=l.length-1;0<=g;--g)t[l[g]]=l[g];for(g= | |
n.length-1;0<=g;--g)t[n[g]]=n[g];l=[];n=void 0;for(n in t)l.push(t[n]);a[e]=l}else b[d]=c[d]}function E(b,c){var a={};y(a,b);y(a,c);return a}function z(b,c){for(var a=E({},b),e=L.length-1;0<=e;e--){var f=L[e];a[f]&&(a[""]instanceof Object||(a[""]={}),a[""][f]=a[f],delete a[f])}c&&(a.ignore=h(c.ignore,a.ignore),a.include=h(c.include,a.include),a.copy=h(c.copy,a.copy),a.observe=h(c.observe,a.observe));a.ignore=h(a.ignore,j.ignore);a.include=h(a.include,j.include);a.copy=h(a.copy,j.copy);a.observe=h(a.observe, | |
j.observe);a.mappedProperties=a.mappedProperties||{};a.copiedProperties=a.copiedProperties||{};return a}function h(b,c){"array"!==f.getType(b)&&(b="undefined"===f.getType(b)?[]:[b]);"array"!==f.getType(c)&&(c="undefined"===f.getType(c)?[]:[c]);return e.utils.arrayGetDistinctValues(b.concat(c))}function F(b,c,a,d,k,l,n){var t="array"===f.getType(e.utils.unwrapObservable(c));l=l||"";if(f.isMapped(b)){var g=e.utils.unwrapObservable(b)[p];a=E(g,a)}var j=n||k,h=function(){return a[d]&&a[d].create instanceof | |
Function},x=function(b){var f=G,g=e.dependentObservable;e.dependentObservable=function(a,b,c){c=c||{};a&&"object"==typeof a&&(c=a);var d=c.deferEvaluation,M=!1;c.deferEvaluation=!0;a=new H(a,b,c);if(!d){var g=a,d=e.dependentObservable;e.dependentObservable=H;a=e.isWriteableObservable(g);e.dependentObservable=d;d=H({read:function(){M||(e.utils.arrayRemoveItem(f,g),M=!0);return g.apply(g,arguments)},write:a&&function(a){return g(a)},deferEvaluation:!0});d.__DO=g;a=d;f.push(a)}return a};e.dependentObservable.fn= | |
H.fn;e.computed=e.dependentObservable;b=e.utils.unwrapObservable(k)instanceof Array?a[d].create({data:b||c,parent:j,skip:N}):a[d].create({data:b||c,parent:j});e.dependentObservable=g;e.computed=e.dependentObservable;return b},u=function(){return a[d]&&a[d].update instanceof Function},v=function(b,f){var g={data:f||c,parent:j,target:e.utils.unwrapObservable(b)};e.isWriteableObservable(b)&&(g.observable=b);return a[d].update(g)};if(n=I.get(c))return n;d=d||"";if(t){var t=[],s=!1,m=function(a){return a}; | |
a[d]&&a[d].key&&(m=a[d].key,s=!0);e.isObservable(b)||(b=e.observableArray([]),b.mappedRemove=function(a){var c="function"==typeof a?a:function(b){return b===m(a)};return b.remove(function(a){return c(m(a))})},b.mappedRemoveAll=function(a){var c=C(a,m);return b.remove(function(a){return-1!=e.utils.arrayIndexOf(c,m(a))})},b.mappedDestroy=function(a){var c="function"==typeof a?a:function(b){return b===m(a)};return b.destroy(function(a){return c(m(a))})},b.mappedDestroyAll=function(a){var c=C(a,m);return b.destroy(function(a){return-1!= | |
e.utils.arrayIndexOf(c,m(a))})},b.mappedIndexOf=function(a){var c=C(b(),m);a=m(a);return e.utils.arrayIndexOf(c,a)},b.mappedGet=function(a){return b()[b.mappedIndexOf(a)]},b.mappedCreate=function(a){if(-1!==b.mappedIndexOf(a))throw Error("There already is an object with the key that you specified.");var c=h()?x(a):a;u()&&(a=v(c,a),e.isWriteableObservable(c)?c(a):c=a);b.push(c);return c});n=C(e.utils.unwrapObservable(b),m).sort();g=C(c,m);s&&g.sort();s=e.utils.compareArrays(n,g);n={};var J,A=e.utils.unwrapObservable(c), | |
y={},z=!0,g=0;for(J=A.length;g<J;g++){var r=m(A[g]);if(void 0===r||r instanceof Object){z=!1;break}y[r]=A[g]}var A=[],B=0,g=0;for(J=s.length;g<J;g++){var r=s[g],q,w=l+"["+g+"]";switch(r.status){case "added":var D=z?y[r.value]:K(e.utils.unwrapObservable(c),r.value,m);q=F(void 0,D,a,d,b,w,k);h()||(q=e.utils.unwrapObservable(q));w=O(e.utils.unwrapObservable(c),D,n);q===N?B++:A[w-B]=q;n[w]=!0;break;case "retained":D=z?y[r.value]:K(e.utils.unwrapObservable(c),r.value,m);q=K(b,r.value,m);F(q,D,a,d,b,w, | |
k);w=O(e.utils.unwrapObservable(c),D,n);A[w]=q;n[w]=!0;break;case "deleted":q=K(b,r.value,m)}t.push({event:r.status,item:q})}b(A);a[d]&&a[d].arrayChanged&&e.utils.arrayForEach(t,function(b){a[d].arrayChanged(b.event,b.item)})}else if(P(c)){b=e.utils.unwrapObservable(b);if(!b){if(h())return s=x(),u()&&(s=v(s)),s;if(u())return v(s);b={}}u()&&(b=v(b));I.save(c,b);if(u())return b;Q(c,function(d){var f=l.length?l+"."+d:d;if(-1==e.utils.arrayIndexOf(a.ignore,f))if(-1!=e.utils.arrayIndexOf(a.copy,f))b[d]= | |
c[d];else if("object"!=typeof c[d]&&"array"!=typeof c[d]&&0<a.observe.length&&-1==e.utils.arrayIndexOf(a.observe,f))b[d]=c[d],a.copiedProperties[f]=!0;else{var g=I.get(c[d]),k=F(b[d],c[d],a,d,b,f,b),g=g||k;if(0<a.observe.length&&-1==e.utils.arrayIndexOf(a.observe,f))b[d]=g(),a.copiedProperties[f]=!0;else{if(e.isWriteableObservable(b[d])){if(g=e.utils.unwrapObservable(g),b[d]()!==g)b[d](g)}else g=void 0===b[d]?g:e.utils.unwrapObservable(g),b[d]=g;a.mappedProperties[f]=!0}}})}else switch(f.getType(c)){case "function":u()? | |
e.isWriteableObservable(c)?(c(v(c)),b=c):b=v(c):b=c;break;default:if(e.isWriteableObservable(b))return q=u()?v(b):e.utils.unwrapObservable(c),b(q),q;h()||u();b=h()?x():e.observable(e.utils.unwrapObservable(c));u()&&b(v(b))}return b}function O(b,c,a){for(var d=0,e=b.length;d<e;d++)if(!0!==a[d]&&b[d]===c)return d;return null}function R(b,c){var a;c&&(a=c(b));"undefined"===f.getType(a)&&(a=b);return e.utils.unwrapObservable(a)}function K(b,c,a){b=e.utils.unwrapObservable(b);for(var d=0,f=b.length;d< | |
f;d++){var l=b[d];if(R(l,a)===c)return l}throw Error("When calling ko.update*, the key '"+c+"' was not found!");}function C(b,c){return e.utils.arrayMap(e.utils.unwrapObservable(b),function(a){return c?R(a,c):a})}function Q(b,c){if("array"===f.getType(b))for(var a=0;a<b.length;a++)c(a);else for(a in b)c(a)}function P(b){var c=f.getType(b);return("object"===c||"array"===c)&&null!==b}function T(){var b=[],c=[];this.save=function(a,d){var f=e.utils.arrayIndexOf(b,a);0<=f?c[f]=d:(b.push(a),c.push(d))}; | |
this.get=function(a){a=e.utils.arrayIndexOf(b,a);return 0<=a?c[a]:void 0}}function S(){var b={},c=function(a){var c;try{c=a}catch(e){c="$$$"}a=b[c];void 0===a&&(a=new T,b[c]=a);return a};this.save=function(a,b){c(a).save(a,b)};this.get=function(a){return c(a).get(a)}}var p="__ko_mapping__",H=e.dependentObservable,B=0,G,I,L=["create","update","key","arrayChanged"],N={},x={include:["_destroy"],ignore:[],copy:[],observe:[]},j=x;f.isMapped=function(b){return(b=e.utils.unwrapObservable(b))&&b[p]};f.fromJS= | |
function(b){if(0==arguments.length)throw Error("When calling ko.fromJS, pass the object you want to convert.");try{B++||(G=[],I=new S);var c,a;2==arguments.length&&(arguments[1][p]?a=arguments[1]:c=arguments[1]);3==arguments.length&&(c=arguments[1],a=arguments[2]);a&&(c=E(c,a[p]));c=z(c);var d=F(a,b,c);a&&(d=a);if(!--B)for(;G.length;){var e=G.pop();e&&(e(),e.__DO.throttleEvaluation=e.throttleEvaluation)}d[p]=E(d[p],c);return d}catch(f){throw B=0,f;}};f.fromJSON=function(b){var c=e.utils.parseJson(b); | |
arguments[0]=c;return f.fromJS.apply(this,arguments)};f.updateFromJS=function(){throw Error("ko.mapping.updateFromJS, use ko.mapping.fromJS instead. Please note that the order of parameters is different!");};f.updateFromJSON=function(){throw Error("ko.mapping.updateFromJSON, use ko.mapping.fromJSON instead. Please note that the order of parameters is different!");};f.toJS=function(b,c){j||f.resetDefaultOptions();if(0==arguments.length)throw Error("When calling ko.mapping.toJS, pass the object you want to convert."); | |
if("array"!==f.getType(j.ignore))throw Error("ko.mapping.defaultOptions().ignore should be an array.");if("array"!==f.getType(j.include))throw Error("ko.mapping.defaultOptions().include should be an array.");if("array"!==f.getType(j.copy))throw Error("ko.mapping.defaultOptions().copy should be an array.");c=z(c,b[p]);return f.visitModel(b,function(a){return e.utils.unwrapObservable(a)},c)};f.toJSON=function(b,c){var a=f.toJS(b,c);return e.utils.stringifyJson(a)};f.defaultOptions=function(){if(0<arguments.length)j= | |
arguments[0];else return j};f.resetDefaultOptions=function(){j={include:x.include.slice(0),ignore:x.ignore.slice(0),copy:x.copy.slice(0)}};f.getType=function(b){if(b&&"object"===typeof b){if(b.constructor===Date)return"date";if(b.constructor===Array)return"array"}return typeof b};f.visitModel=function(b,c,a){a=a||{};a.visitedObjects=a.visitedObjects||new S;var d,k=e.utils.unwrapObservable(b);if(P(k))a=z(a,k[p]),c(b,a.parentName),d="array"===f.getType(k)?[]:{};else return c(b,a.parentName);a.visitedObjects.save(b, | |
d);var l=a.parentName;Q(k,function(b){if(!(a.ignore&&-1!=e.utils.arrayIndexOf(a.ignore,b))){var j=k[b],g=a,h=l||"";"array"===f.getType(k)?l&&(h+="["+b+"]"):(l&&(h+="."),h+=b);g.parentName=h;if(!(-1===e.utils.arrayIndexOf(a.copy,b)&&-1===e.utils.arrayIndexOf(a.include,b)&&k[p]&&k[p].mappedProperties&&!k[p].mappedProperties[b]&&k[p].copiedProperties&&!k[p].copiedProperties[b]&&"array"!==f.getType(k)))switch(f.getType(e.utils.unwrapObservable(j))){case "object":case "array":case "undefined":g=a.visitedObjects.get(j); | |
d[b]="undefined"!==f.getType(g)?g:f.visitModel(j,c,a);break;default:d[b]=c(j,a.parentName)}}});return d}}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment