[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"article-using-jsrender-with-javascript-and-html":3},{"article":4,"tags":72,"previous":87,"next":157},{"id":5,"title":6,"author":7,"body":8,"createdAt":61,"description":62,"extension":63,"img":64,"meta":65,"navigation":66,"path":67,"seo":68,"stem":69,"tags":70,"updatedAt":61,"__hash__":71},"articles\u002Farticles\u002Fusing-jsrender-with-javascript-and-html.md","Using JsRender with JavaScript and HTML","[object Object]",{"type":9,"value":10,"toc":57},"minimark",[11,19,26,29,39,44],[12,13,14,15,18],"p",{},"JsRender is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate HTML dynamically. JsRender brings a new templating library to HTML5 development that has a codeless tag syntax and high performance, has no dependency on jQuery nor on the Document Object Model (DOM), supports creating custom functions and uses pure string-based rendering.",[16,17],"br",{},"\nThe following sample will utilize a method within a MVC controller to output json string via jquery ajax call.",[20,21,25],"pre",{"className":22},[23,24],"brush:","csharp","        public JsonResult GetCustomers()  \n        {  \n            var customers = new List(){  \n                new Customer() { ID= \"1\", Name= \"Bobby Jones\", Birthday= \"1902-03-17\" },  \n                new Customer() { ID= \"2\", Name= \"Sam Snead\",   Birthday= \"1912-05-27\" },  \n                new Customer() { ID= \"3\", Name= \"Tiger Woods\", Birthday= \"1975-12-30\" }  \n            };             \n            return this.Json(customers, JsonRequestBehavior.AllowGet);  \n            }  \n        }  \n  \n    public class Customer{  \n        public string ID {get; set;}  \n        public string Name {get; set;}  \n        public string Birthday {get; set;}  \n    }  \n    ",[12,27,28],{},"You can render templates using JavaScript in several ways. First you’ll want to define your template either as a string or in a \u003Cscript> tag. The \u003Cscript> tag option is nice when you want to define your templates in the HTML, give them an id and reuse them. You can also create templates from strings, which gives you the ability to create them on the fly in code or even pull them from a data store..  The JavaScript on the page is as follows",[20,30,33,34,33],{"className":31},[23,32],"javascript","  \n",[35,36,38],"script",{"type":37},"text\u002Fjavascript","\u002F\u002F \u003C![CDATA[  \n         function getdata() {  \n        var s = $.getJSON(\"\u002FHome\u002FGetCustomers\", function (data) {  \n             $(\"#GolferDiv\").html($(\"#InnerGolferTemplate1\").render(data));  \n        });           \n        }  \n\u002F\u002F ]]>",[40,41,43],"div",{"id":42},"GolferDiv"," ",[20,45,48,33,53,33],{"className":46},[23,47],"html",[49,50],"input",{"type":51,"value":52},"button","get data",[35,54,56],{"id":55,"type":37},"InnerGolferTemplate1","\u002F\u002F \u003C![CDATA[  \n         {{:ID}}: \u003Cb>{{:Name}}\u003C\u002Fb> \u003Ci>{{:Birthday}}\u003C\u002Fi> \u003Cbr \u002F>  \n\u002F\u002F ]]>",{"title":58,"searchDepth":59,"depth":59,"links":60},"",2,[],"2015-04-20T08:07:12.7600000-04:00","JsRender is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate HTML dynamically.","md",null,{},true,"\u002Farticles\u002Fusing-jsrender-with-javascript-and-html",{"title":6,"description":62},"articles\u002Fusing-jsrender-with-javascript-and-html",[32],"X9dre_jVgpJBCollFTxNxhq1RoM7KALI3HKpYTjYECA",[73],{"id":74,"title":75,"body":76,"description":80,"extension":63,"img":81,"meta":82,"name":32,"navigation":66,"path":83,"seo":84,"stem":85,"__hash__":86},"tags\u002Ftags\u002Fjavascript.md","Javascript",{"type":9,"value":77,"toc":78},[],{"title":58,"searchDepth":59,"depth":59,"links":79},[],"JavaScript is a programming language adhering to the ECMAScript spec.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598425237654-4fc758e50a93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"\u002Ftags\u002Fjavascript",{"description":80},"tags\u002Fjavascript","wqzmOtgcvcAeeB0QinMxw2OqnSglrJN0TeWQ-fulunM",{"id":88,"title":89,"author":7,"body":90,"createdAt":145,"description":146,"extension":63,"img":147,"meta":148,"navigation":66,"path":149,"seo":150,"stem":151,"tags":152,"updatedAt":145,"__hash__":156},"articles\u002Farticles\u002Fnew-ssdt-power-tools-now-for-both-visual-studio-2010-and-visual-studio-2012.md","New SSDT Power Tools! Now for both Visual Studio 2010 and Visual Studio 2012",{"type":9,"value":91,"toc":143},[92,95,98],[12,93,94],{},"Microsoft is pleased to announce the latest release of SSDT Power Tools!",[12,96,97],{},"We continue to use power tools to get early versions of experiences or quick features to you and we’re always interested in hearing your feedback.",[12,99,100,101,105,106,110,114,115,118,121,122,126,127,131,132,134,135,137,140],{},"This release of the tools (Version 1.3) builds on the previous release.  This release of the power tools is",[102,103,104],"i",{}," only ","compatible with the newest update for SQL Server Data Tools. First, get the SSDT – September 2012 update for Visual Studio 2010 or Visual Studio 2012 here:  SSDT for Visual Studio 2012: ",[107,108],"a",{"href":109},"http:\u002F\u002Fmsdn.microsoft.com\u002Fen-us\u002Fjj650015",[107,111,109],{"href":109,"rel":112},[113],"nofollow","  SSDT for Visual Studio 2010: ",[107,116],{"href":117},"http:\u002F\u002Fmsdn.microsoft.com\u002Fen-us\u002Fjj650014",[107,119,117],{"href":117,"rel":120},[113],"    For the first time, this power tools release provides a version of the power tools for Visual Studio 2012 in addition to the version for Visual Studio 2010. They are separate installs that you can grab here:  ",[107,123,125],{"href":124},"http:\u002F\u002Fvisualstudiogallery.msdn.microsoft.com\u002F9b0228c6-15d1-44de-9279-66dde12bf861?SRC=Featured","SSDT Power Tools for Visual Studio 2010","  ",[107,128,130],{"href":129},"http:\u002F\u002Fvisualstudiogallery.msdn.microsoft.com\u002F96a2f8cc-0c8b-47dd-93cd-1e8e9f34a917","SSDT Power Tools for Visual Studio 2012","  Requirements:",[16,133],{},"\nSQL Server 2008 Service Pack 1",[16,136],{},[107,138],{"href":139},"http:\u002F\u002Fwww.microsoft.com\u002Fen-us\u002Fdownload\u002Fdetails.aspx?id=20302",[107,141,139],{"href":139,"rel":142},[113],{"title":58,"searchDepth":59,"depth":59,"links":144},[],"2015-04-20T08:07:12.8400000-04:00","SQL Server Data Tools (SSDT) provides project templates and design surfaces for building SQL Server content types - relational databases, Analysis Services models, Reporting Services reports, and Integration Services packages.","\u002Farticles\u002Fimages\u002FMdpbTnH58m.png",{},"\u002Farticles\u002Fnew-ssdt-power-tools-now-for-both-visual-studio-2010-and-visual-studio-2012",{"title":89,"description":146},"articles\u002Fnew-ssdt-power-tools-now-for-both-visual-studio-2010-and-visual-studio-2012",[153,154,155],"visualstudio","sql","sqlserver","e_YUJhN16WAmwBhand1Scn-44WrB72gU7EuktLScjHE",{"id":158,"title":159,"author":7,"body":160,"createdAt":276,"description":64,"extension":63,"img":64,"meta":277,"navigation":66,"path":278,"seo":279,"stem":280,"tags":281,"updatedAt":276,"__hash__":282},"articles\u002Farticles\u002Fjavascript-patterns-benefits.md","JavaScript Patterns–Benefits",{"type":9,"value":161,"toc":274},[162,168,178,183,212,217,236,241,252,257],[12,163,164],{},[165,166,167],"strong",{},"Closures",[169,170,171,175],"ul",{},[172,173,174],"li",{},"By default, all variables and functions are added to the global scope, possibly causing naming conflicts",[172,176,177],{},"closures can be used to define scopes nested function have always accessed to all objects defined in the outer scope\nif a nested function references an object defined in the outer scope, a closure is created and the object will not be destroyed when the outer function is returned",[12,179,180],{},[165,181,182],{},"Prototype Pattern",[169,184,185,188,191,194,197,200,203,206,209],{},[172,186,187],{},"similar to a class, a prototype is a blueprint for objects",[172,189,190],{},"encapsulates code into modules and takes it out of the global namespace",[172,192,193],{},"variables are assigned in the constructor",[172,195,196],{},"functions are defined in the prototype block",[172,198,199],{},"this keyword is required to reference variables and functions within one prototype",[172,201,202],{},"all functions are only loaded once into memory, no matter how many objects are created using the constructor",[172,204,205],{},"Allow functions to be overridden",[172,207,208],{},"variables are specific to one instance",[172,210,211],{},"functions are shared among all instances",[12,213,214],{},[165,215,216],{},"Module Pattern",[169,218,219,221,224,227,230,233],{},[172,220,190],{},[172,222,223],{},"allows definition of private\u002Fpublic members",[172,225,226],{},"if multiple objects are created, all functions are loaded into memory multiple times",[172,228,229],{},"less extensible than the prototype pattern",[172,231,232],{},"members in the return statement are public, members outside the return statement are private",[172,234,235],{},"does not require the use of a constructor and is often initialized using a self calling function (= singleton)",[12,237,238],{},[165,239,240],{},"Revealing Module Pattern",[169,242,243,246,249],{},[172,244,245],{},"Very similar to the module pattern",[172,247,248],{},"Cleaner separation between private members and public interface",[172,250,251],{},"Instead of public functions, an object literal is returned which contains references to the private functions which should be exposed",[12,253,254],{},[165,255,256],{},"Revealing Prototype Pattern",[169,258,259,262,265,268,271],{},[172,260,261],{},"very similar to the prototype pattern",[172,263,264],{},"adds the separation of private and public members from the revealing module pattern",[172,266,267],{},"if a method calls another method within the prototype, the 'this' is no longer the object but the calling method",[172,269,270],{},"'this' can be passed as a parameter or",[172,272,273],{},"the method can be called with method name.call(this, anotherParam) which passes the context (the signature of \"methodname\" is just methodname(anotherParam)",{"title":58,"searchDepth":59,"depth":59,"links":275},[],"2015-04-20T08:07:12.5700000-04:00",{},"\u002Farticles\u002Fjavascript-patterns-benefits",{"title":159,"description":64},"articles\u002Fjavascript-patterns-benefits",[75],"Gq2t3bvJ5d2golE5WDJLg47e7WKz_s48o16aPtRqkNU",1781574764797]