[{"data":1,"prerenderedAt":611},["ShallowReactive",2],{"tag-knockout":3},{"tag":4,"articles":24},{"id":5,"title":6,"body":7,"description":14,"extension":15,"img":16,"meta":17,"name":18,"navigation":19,"path":20,"seo":21,"stem":22,"__hash__":23},"tags\u002Ftags\u002Fknockout.md","Knockout",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"JavaScript framework","md","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"knockout",true,"\u002Ftags\u002Fknockout",{"description":14},"tags\u002Fknockout","zVw-nWiaWRnCgH0G-z-_kVZ_fXxO_B2DQTIErQ1Y0ho",[25],{"id":26,"title":27,"author":28,"body":29,"createdAt":600,"description":601,"extension":15,"img":602,"meta":603,"navigation":19,"path":604,"seo":605,"stem":606,"tags":607,"updatedAt":600,"__hash__":610},"articles\u002Farticles\u002Fselect2-and-knockout-binding.md","Select2 and Knockout Binding","[object Object]",{"type":8,"value":30,"toc":598},[31,51,318,325,594],[32,33,34,35,40,41,44,45,47,48,50],"p",{},"If using ",[36,37,39],"a",{"href":38},"http:\u002F\u002Fivaynberg.github.io\u002Fselect2\u002F","Select2 ","and Knockout, you have the following options for hooking up to html elements. In both of these cases my viewmodel has a property called EvaluatorList with collection object properties of DisplayName and Code.",[42,43],"br",{},"\n ",[42,46],{},"\n1.) Manual",[42,49],{},"\nJavaScript looking like",[52,53,57],"pre",{"className":54,"code":55,"language":56,"meta":11,"style":11},"language-javascript shiki shiki-themes github-light github-dark","        $(\"#txtEvaluator\").select2({  \n            placeholder: 'Evaluator',  \n            multiple:true,  \n            allowClear: true,  \n            id: function (e) { return e.Code },  \n            data: { results: ko.toJS(viewModel.EvaluatorList()), text: 'DisplayName' },  \n            formatSelection: function (item) { return item.DisplayName; },  \n            formatResult: function (item) { return item.DisplayName; }  \n        }).on(\"select2-selecting\", function (e) {  \n            $('#txtEvaluatorId').val(e.val).change();  \n        }).on(\"select2-removed\", function (e) {  \n            $('#txtEvaluatorId').val('').change();  \n        });  \n","javascript",[58,59,60,86,97,109,119,148,172,194,215,241,266,288,312],"code",{"__ignoreMap":11},[61,62,65,69,73,77,80,83],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sScJk","        $",[61,70,72],{"class":71},"sVt8B","(",[61,74,76],{"class":75},"sZZnC","\"#txtEvaluator\"",[61,78,79],{"class":71},").",[61,81,82],{"class":67},"select2",[61,84,85],{"class":71},"({  \n",[61,87,88,91,94],{"class":63,"line":12},[61,89,90],{"class":71},"            placeholder: ",[61,92,93],{"class":75},"'Evaluator'",[61,95,96],{"class":71},",  \n",[61,98,100,103,107],{"class":63,"line":99},3,[61,101,102],{"class":71},"            multiple:",[61,104,106],{"class":105},"sj4cs","true",[61,108,96],{"class":71},[61,110,112,115,117],{"class":63,"line":111},4,[61,113,114],{"class":71},"            allowClear: ",[61,116,106],{"class":105},[61,118,96],{"class":71},[61,120,122,125,128,132,135,139,142,145],{"class":63,"line":121},5,[61,123,124],{"class":67},"            id",[61,126,127],{"class":71},": ",[61,129,131],{"class":130},"szBVR","function",[61,133,134],{"class":71}," (",[61,136,138],{"class":137},"s4XuR","e",[61,140,141],{"class":71},") { ",[61,143,144],{"class":130},"return",[61,146,147],{"class":71}," e.Code },  \n",[61,149,151,154,157,160,163,166,169],{"class":63,"line":150},6,[61,152,153],{"class":71},"            data: { results: ko.",[61,155,156],{"class":67},"toJS",[61,158,159],{"class":71},"(viewModel.",[61,161,162],{"class":67},"EvaluatorList",[61,164,165],{"class":71},"()), text: ",[61,167,168],{"class":75},"'DisplayName'",[61,170,171],{"class":71}," },  \n",[61,173,175,178,180,182,184,187,189,191],{"class":63,"line":174},7,[61,176,177],{"class":67},"            formatSelection",[61,179,127],{"class":71},[61,181,131],{"class":130},[61,183,134],{"class":71},[61,185,186],{"class":137},"item",[61,188,141],{"class":71},[61,190,144],{"class":130},[61,192,193],{"class":71}," item.DisplayName; },  \n",[61,195,197,200,202,204,206,208,210,212],{"class":63,"line":196},8,[61,198,199],{"class":67},"            formatResult",[61,201,127],{"class":71},[61,203,131],{"class":130},[61,205,134],{"class":71},[61,207,186],{"class":137},[61,209,141],{"class":71},[61,211,144],{"class":130},[61,213,214],{"class":71}," item.DisplayName; }  \n",[61,216,218,221,224,226,229,232,234,236,238],{"class":63,"line":217},9,[61,219,220],{"class":71},"        }).",[61,222,223],{"class":67},"on",[61,225,72],{"class":71},[61,227,228],{"class":75},"\"select2-selecting\"",[61,230,231],{"class":71},", ",[61,233,131],{"class":130},[61,235,134],{"class":71},[61,237,138],{"class":137},[61,239,240],{"class":71},") {  \n",[61,242,244,247,249,252,254,257,260,263],{"class":63,"line":243},10,[61,245,246],{"class":67},"            $",[61,248,72],{"class":71},[61,250,251],{"class":75},"'#txtEvaluatorId'",[61,253,79],{"class":71},[61,255,256],{"class":67},"val",[61,258,259],{"class":71},"(e.val).",[61,261,262],{"class":67},"change",[61,264,265],{"class":71},"();  \n",[61,267,269,271,273,275,278,280,282,284,286],{"class":63,"line":268},11,[61,270,220],{"class":71},[61,272,223],{"class":67},[61,274,72],{"class":71},[61,276,277],{"class":75},"\"select2-removed\"",[61,279,231],{"class":71},[61,281,131],{"class":130},[61,283,134],{"class":71},[61,285,138],{"class":137},[61,287,240],{"class":71},[61,289,291,293,295,297,299,301,303,306,308,310],{"class":63,"line":290},12,[61,292,246],{"class":67},[61,294,72],{"class":71},[61,296,251],{"class":75},[61,298,79],{"class":71},[61,300,256],{"class":67},[61,302,72],{"class":71},[61,304,305],{"class":75},"''",[61,307,79],{"class":71},[61,309,262],{"class":67},[61,311,265],{"class":71},[61,313,315],{"class":63,"line":314},13,[61,316,317],{"class":71},"        });\n",[32,319,320,321],{},"Option 2) Using ",[36,322,324],{"href":323},"\u002Fblog\u002Fpost\u002F2014\u002F01\u002F20\u002FSelect2-and-Knockout-Binding.aspx","binding handler",[52,326,328],{"className":54,"code":327,"language":56,"meta":11,"style":11},"ko.bindingHandlers.select2 = {  \n    init: function (element, valueAccessor, allBindingsAccessor) {  \n        var obj = valueAccessor(),  \n            allBindings = allBindingsAccessor(),  \n            lookupKey = allBindings.lookupKey;  \n        $(element).select2(obj);  \n        if (lookupKey) {  \n            var value = ko.utils.unwrapObservable(allBindings.value);  \n            $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) {  \n                return item[lookupKey] === value;  \n            }));  \n        }  \n  \n        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {  \n            $(element).select2('destroy');  \n        });  \n    },  \n    update: function (element) {  \n        $(element).trigger('change');  \n    }  \n};  \n",[58,329,330,341,367,383,395,405,417,425,444,474,488,493,498,503,520,537,543,549,565,582,588],{"__ignoreMap":11},[61,331,332,335,338],{"class":63,"line":64},[61,333,334],{"class":71},"ko.bindingHandlers.select2 ",[61,336,337],{"class":130},"=",[61,339,340],{"class":71}," {  \n",[61,342,343,346,348,350,352,355,357,360,362,365],{"class":63,"line":12},[61,344,345],{"class":67},"    init",[61,347,127],{"class":71},[61,349,131],{"class":130},[61,351,134],{"class":71},[61,353,354],{"class":137},"element",[61,356,231],{"class":71},[61,358,359],{"class":137},"valueAccessor",[61,361,231],{"class":71},[61,363,364],{"class":137},"allBindingsAccessor",[61,366,240],{"class":71},[61,368,369,372,375,377,380],{"class":63,"line":99},[61,370,371],{"class":130},"        var",[61,373,374],{"class":71}," obj ",[61,376,337],{"class":130},[61,378,379],{"class":67}," valueAccessor",[61,381,382],{"class":71},"(),  \n",[61,384,385,388,390,393],{"class":63,"line":111},[61,386,387],{"class":71},"            allBindings ",[61,389,337],{"class":130},[61,391,392],{"class":67}," allBindingsAccessor",[61,394,382],{"class":71},[61,396,397,400,402],{"class":63,"line":121},[61,398,399],{"class":71},"            lookupKey ",[61,401,337],{"class":130},[61,403,404],{"class":71}," allBindings.lookupKey;  \n",[61,406,407,409,412,414],{"class":63,"line":150},[61,408,68],{"class":67},[61,410,411],{"class":71},"(element).",[61,413,82],{"class":67},[61,415,416],{"class":71},"(obj);  \n",[61,418,419,422],{"class":63,"line":174},[61,420,421],{"class":130},"        if",[61,423,424],{"class":71}," (lookupKey) {  \n",[61,426,427,430,433,435,438,441],{"class":63,"line":196},[61,428,429],{"class":130},"            var",[61,431,432],{"class":71}," value ",[61,434,337],{"class":130},[61,436,437],{"class":71}," ko.utils.",[61,439,440],{"class":67},"unwrapObservable",[61,442,443],{"class":71},"(allBindings.value);  \n",[61,445,446,448,450,452,454,457,460,463,466,468,470,472],{"class":63,"line":217},[61,447,246],{"class":67},[61,449,411],{"class":71},[61,451,82],{"class":67},[61,453,72],{"class":71},[61,455,456],{"class":75},"'data'",[61,458,459],{"class":71},", ko.utils.",[61,461,462],{"class":67},"arrayFirst",[61,464,465],{"class":71},"(obj.data.results, ",[61,467,131],{"class":130},[61,469,134],{"class":71},[61,471,186],{"class":137},[61,473,240],{"class":71},[61,475,476,479,482,485],{"class":63,"line":243},[61,477,478],{"class":130},"                return",[61,480,481],{"class":71}," item[lookupKey] ",[61,483,484],{"class":130},"===",[61,486,487],{"class":71}," value;  \n",[61,489,490],{"class":63,"line":268},[61,491,492],{"class":71},"            }));  \n",[61,494,495],{"class":63,"line":290},[61,496,497],{"class":71},"        }  \n",[61,499,500],{"class":63,"line":314},[61,501,502],{"class":71},"  \n",[61,504,506,509,512,515,517],{"class":63,"line":505},14,[61,507,508],{"class":71},"        ko.utils.domNodeDisposal.",[61,510,511],{"class":67},"addDisposeCallback",[61,513,514],{"class":71},"(element, ",[61,516,131],{"class":130},[61,518,519],{"class":71}," () {  \n",[61,521,523,525,527,529,531,534],{"class":63,"line":522},15,[61,524,246],{"class":67},[61,526,411],{"class":71},[61,528,82],{"class":67},[61,530,72],{"class":71},[61,532,533],{"class":75},"'destroy'",[61,535,536],{"class":71},");  \n",[61,538,540],{"class":63,"line":539},16,[61,541,542],{"class":71},"        });  \n",[61,544,546],{"class":63,"line":545},17,[61,547,548],{"class":71},"    },  \n",[61,550,552,555,557,559,561,563],{"class":63,"line":551},18,[61,553,554],{"class":67},"    update",[61,556,127],{"class":71},[61,558,131],{"class":130},[61,560,134],{"class":71},[61,562,354],{"class":137},[61,564,240],{"class":71},[61,566,568,570,572,575,577,580],{"class":63,"line":567},19,[61,569,68],{"class":67},[61,571,411],{"class":71},[61,573,574],{"class":67},"trigger",[61,576,72],{"class":71},[61,578,579],{"class":75},"'change'",[61,581,536],{"class":71},[61,583,585],{"class":63,"line":584},20,[61,586,587],{"class":71},"    }  \n",[61,589,591],{"class":63,"line":590},21,[61,592,593],{"class":71},"};\n",[595,596,597],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":11,"searchDepth":12,"depth":12,"links":599},[],"2015-04-20T08:07:16.9200000-04:00",null,"\u002Farticles\u002Fimages\u002Fko.jpg",{},"\u002Farticles\u002Fselect2-and-knockout-binding",{"title":27,"description":601},"articles\u002Fselect2-and-knockout-binding",[608,609,56,18],"aspnet","html","IAV-2N-X-tExH1G5PlY5R0oGGOGSG-lUgmlyANRbjsM",1781574759660]