Search Results

Search found 47 results on 2 pages for 'resig'.

Page 1/2 | 1 2  | Next Page >

  • Converting John Resig's Templating Engine to work with PHP Templates

    - by Serhiy
    I'm trying to convert the John Resig's new ASP.NET Templating Engine to work with PHP. Essentially what I would like to achieve is the ability to use certain Kohana Views via a JavaScript templating engine, that way I can use the same views for both a standard PHP request and a jQuery AJAX request. I'm starting with the basics and would like to be able to convert http://github.com/nje/jquery-tmpl/blob/master/jquery.tmpl.js To work with php like so... <li><a href="{%= link %}">{%= title %}</a> - {%= description %}</li> <li><a href="<?= $link ?>"><?= $title ?></a> - <?= description ?></li> The RexEx in it is a bit over my head and it's apparently not as easy as changing the %} to ? in lines 148 to 158. Any help would be highly appreciated. I'm also not sure of how to take care of the $ difference that PHP variables have. Thanks, Serhiy

    Read the article

  • Converting John Resig's JavaScript Templating Engine to work with PHP Templates

    - by Serhiy
    I'm trying to convert the John Resig's Templating Engine to work with PHP. Essentially what I would like to achieve is the ability to use certain Kohana Views via a JavaScript templating engine, that way I can use the same views for both a standard PHP request and a jQuery AJAX request. I'm starting with the basics and would like to be able to convert http://github.com/nje/jquery-tmpl/blob/master/jquery.tmpl.js To work with php like so... ### From This ### <li><a href="{%= link %}">{%= title %}</a> - {%= description %}</li> ### Into This ### <li><a href="<?= $link ?>"><?= $title ?></a> - <?= description ?></li> The RexEx in it is a bit over my head and it's apparently not as easy as changing the %} to ? in lines 148 to 158. Any help would be highly appreciated. I'm also not sure of how to take care of the $ difference that PHP variables have. Thanks, Serhiy

    Read the article

  • How to make Resig's micro-templates XHTML compliant?

    - by mshelv
    Hello, I have been experimenting with John Resig's micro-template, which works great. However, the mark-up will not pass the XHTML 1.0 Transitional validation test. (Among other things, id attributes yield errors.) Replacing tags identifiers <, with [[,]], passes validation. Thus, I created a js script which at load time (jQuery document ready) converts the square brackets back to regular markers. This works fine in FF, but not in IE, Chrome, etc. Scripts embedded within CDATA tags validate as well. Question: Is there a way to insert micro-template in a script and still pass XHTML validation? My idea was to remove the CDATA tags once the page has been loaded. But there are probably smarter ways. (Note: I'd prefer not to inject HTML via js since the mark-up will be difficult to maintain.) PS: I looked at other js templates, but they are either not XHTML compliant or too bulky. TIA for any hints.

    Read the article

  • Syntax Error with John Resig's Micro Templating.

    - by optician
    I'm having a bit of trouble with John Resig's Micro templating. Can anyone help me with why it isn't working? This is the template <script type="text/html" id="row_tmpl"> test content {%=id%} {%=name%} </script> And the modified section of the engine str .replace(/[\r\t\n]/g, " ") .split("{%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%}").join("p.push('") .split("\r").join("\\'") + "');}return p.join('');"); and the javascript var dataObject = { "id": "27", "name": "some more content" }; var html = tmpl("row_tmpl", dataObject); and the result, as you can see =id and =name seem to be in the wrong place? Apart from changing the template syntax blocks from <% % to {% %} I haven't changed anything. This is from Firefox. Error: syntax error Line: 30, Column: 89 Source Code: var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push(' test content ');=idp.push(' ');=namep.push(' ');}return p.join('');

    Read the article

  • A question about John Resig's Simple Javascript Inheritance.

    - by Zippo
    I'm using this simple code: http://ejohn.org/blog/simple-javascript-inheritance/ Using this "library", I made this simple class: var Person = Class.extend({ init: function(openningSentence) { this.say(openningSentence); }, say: function(words) { alert(words); } }); The problem with this class, is that I can't call a function using the variable "this" (line 3 in the code gives an error: unknown method "say"). Does anybody knoes if there's a solution for this problem? Btw - I'm using jquery, so if there's a jquery-based solution It'll be great :)

    Read the article

  • Can simple javascript inheritance be simplified even further?

    - by Will
    John Resig (of jQuery fame) provides a concise and elegant way to allow simple JavaScript inheritance. It was so short and sweet, in fact, that it inspired me to try and simplify it even further (see code below). I've modified his original function such that it still passes all his tests and has the potential advantage of: readability (50% less code) simplicity (you don't have to be a ninja to understand it) performance (no extra wrappers around super/base method calls) consistency with C#'s base keyword Because this seems almost too good to be true, I want to make sure my logic doesn't have any fundamental flaws/holes/bugs, or if anyone has additional suggestions to improve or refute the code (perhaps even John Resig could chime in here!). Does anyone see anything wrong with my approach (below) vs. John Resig's original approach? if (!window.Class) { window.Class = function() {}; window.Class.extend = function(members) { var prototype = new this(); for (var i in members) prototype[i] = members[i]; prototype.base = this.prototype; function object() { if (object.caller == null && this.initialize) this.initialize.apply(this, arguments); } object.constructor = object; object.prototype = prototype; object.extend = arguments.callee; return object; }; } And the tests (below) are nearly identical to the original ones except for the syntax around base/super method calls (for the reason enumerated above): var Person = Class.extend( { initialize: function(isDancing) { this.dancing = isDancing; }, dance: function() { return this.dancing; } }); var Ninja = Person.extend( { initialize: function() { this.base.initialize(false); }, dance: function() { return this.base.dance(); }, swingSword: function() { return true; } }); var p = new Person(true); alert("true? " + p.dance()); // => true var n = new Ninja(); alert("false? " + n.dance()); // => false alert("true? " + n.swingSword()); // => true alert("true? " + (p instanceof Person && p instanceof Class && n instanceof Ninja && n instanceof Person && n instanceof Class));

    Read the article

  • explanation about prototype.js function binding code

    - by resopollution
    From: http://ejohn.org/apps/learn/#2 Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function(){ return fn.apply(object, args.concat(Array.prototype.slice.call(arguments))); }; }; Can anyone tell me why the second return is necessary (before fn.apply)? Also, can anyone explain why args.concat is necessary? Why wouldn't it be re-written as: fn.apply(object, args) instead of return fn.apply(object, args.concat(Array.prototype.slice.call(arguments)));

    Read the article

  • Syntax Error with John Resig's Micro Templating after changing template tags <# {% {{ etc..

    - by optician
    I'm having a bit of trouble with John Resig's Micro templating. Can anyone help me with why it isn't working? This is the template <script type="text/html" id="row_tmpl"> test content {%=id%} {%=name%} </script> And the modified section of the engine str .replace(/[\r\t\n]/g, " ") .split("{%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%}").join("p.push('") .split("\r").join("\\'") + "');}return p.join('');"); and the javascript var dataObject = { "id": "27", "name": "some more content" }; var html = tmpl("row_tmpl", dataObject); and the result, as you can see =id and =name seem to be in the wrong place? Apart from changing the template syntax blocks from <% % to {% %} I haven't changed anything. This is from Firefox. Error: syntax error Line: 30, Column: 89 Source Code: var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push(' test content ');=idp.push(' ');=namep.push(' ');}return p.join('');

    Read the article

  • Microsoft Templates included in jQuery 1.5!

    - by Stephen Walther
    When I joined the ASP.NET team as the Program Manager for Ajax, the ASP.NET team was working on releasing a new version of the Microsoft Ajax Library. This new version of the Microsoft Ajax Library had several really innovative and unique features such as support for client templates, client data-binding, script dependency management, and globalization. However, we kept hearing the message that our customers wanted to use jQuery when building ASP.NET applications. Therefore, about ten months ago, we decided to pursue a risky strategy. Scott Guthrie sent me to Cambridge to meet with John Resig – the creator of jQuery and leader of the jQuery project – to find out whether Microsoft and jQuery could work together. We wanted to find out whether the jQuery project would be open to allowing Microsoft to contribute the innovative features that we were developing for the Microsoft Ajax Library -- such as client templates and client data-binding -- to the jQuery library. Fortunately, the Cambridge meeting with Resig went well. John Resig was very open to accepting contributions to the jQuery library. Over the next few months, we worked out a process for Microsoft to contribute new features to the open-source jQuery project. Resig and Guthrie appeared on stage at the MIX10 conference to announce that Microsoft would be contributing features to jQuery. It has been a long journey, but I am happy to report success. Today, Microsoft and the jQuery project have announced that three plugins developed by developers on the ASP.NET team – the jQuery Templates, jQuery Data Link, and jQuery Globalization plugins – have been accepted as official jQuery plugins. In addition, the jQuery Templates plugin will be integrated into jQuery 1.5 which is the next major release of jQuery. You can learn more about the plugins by watching the following Web Camps TV episode hosted by James Senior with Stephen Walther: Web Camps TV #5 - Microsoft Commits Code to jQuery! You can read Scott Guthrie’s blog announcement here: http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx You can read the jQuery team’s announcement here: http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/ I wrote the original proposal for the jQuery Templates plugin. Dave Reed and Boris Moore were the ASP.NET developers responsible for actually writing the plugin (with lots of input from the jQuery team and the jQuery community). Boris has written a great set of tutorials on the Templates plugin. The first tutorial in his series is located here: http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html I want to thank John Resig, Richard Worth, Scott Gonzalez, Rey Bango, Jorn Zaefferer, Karl Swedberg and all of the other members of the jQuery team for working with the ASP.NET team and accepting our contributions to the jQuery project.

    Read the article

  • Minimalist, Tiny Javascript Template System?

    - by Parand
    I'm looking for a minimalist template system for javascript, ala John Resig's Javascript Micro Templating. The smaller the better, and if it's jquery based even better. Recommendations? I tried John's micro-templating but ran into a few issues, wanted to see if there are more baked / better packaged solutions out there. [Update] I tried Resig's Micro Templating again and it's working well for me. Would still like to hear about other alternatives if there are any.

    Read the article

  • Filter rows on the basis of "First Name" + "Last Name" in SQL

    - by Raghav Khunger
    Hi, I have a user table in my database which contains two columns FirstName and LastName. Now in my front end there is a textbox to filter out the users from this table. Let's suppose I am taking that input from the front end in the form of a input parameter "@SEARCHKEYWORD". I have created a sample below: DECLARE @Test TABLE ([ID] INT IDENTITY, [FNAME] NVARCHAR(100), [LNAME] NVARCHAR(100) ) INSERT INTO @Test( FNAME, LNAME ) SELECT 'John','Resig' UNION ALL SELECT 'Dave','Ward' UNION ALL SELECT 'Peter','Smith' UNION ALL SELECT 'Dave','Smith' UNION ALL SELECT 'Girija','Acharya' UNION ALL SELECT 'Devendra', 'Gujel' UNION ALL SELECT 'Arjit', 'Gupta' DECLARE @SEARCHKEYWORD NVARCHAR(100) SELECT * FROM @Test WHERE FNAME +' '+ LNAME LIKE @SEARCHKEYWORD i.e. so far I have thought of this query to filter out the rows but it is not giving the desired results: SELECT * FROM @Test WHERE FNAME +' '+ LNAME LIKE @SEARCHKEYWORD Here are the desired outputs which I needed for the inputs mentioned below: --WHEN @SEARCHKEYWORD='John Resig' --Desired OUTPUT: the row which contains 'John','Resig' --WHEN @SEARCHKEYWORD='Ac' --Desired OUTPUT: the row which contains 'Girija','Acharya' --WHEN @SEARCHKEYWORD='Smith' --Desired OUTPUT: the row which contains 'Peter','Smith' and 'Dave','Smith' --WHEN @SEARCHKEYWORD='g' --Desired OUTPUT: the row which contains 'Devendra', 'Gujel' and 'Arjit', 'Gupta' --WHEN @SEARCHKEYWORD='Smith' --Desired OUTPUT: the row which contains 'Peter','Smith' and 'Dave','Smith'

    Read the article

  • Why should I prepend my custom attributes with "data-"?

    - by Horace Loeb
    So any custom data attribute that I use should start with "data-": <li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li> Will anything bad happen if I just ignore this? I.e.: <li class="user" name="John Resig" city="Boston" lang="js" food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li> I guess one bad thing is that my custom attributes could conflict with HTML attributes with special meanings (e.g., name), but aside from this, is there a problem with just writing "example_text" instead of "data-example_text"? (It won't validate, but who cares?)

    Read the article

  • Pro JavaScript Techniques

    If you are into jQuery you no doubt know who John Resig is, the creator of jQuery. Well before jQuery hit the scenes John wrote Pro JavaScript Techniques, by Apress. I have really been digging into the bowls of how JavaScript works because I am doing...(read more)...Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • Microsoft, jQuery, and Templating

    - by Latest Microsoft Blogs
    About two months ago, John Resig and I met at Café Algiers in Harvard square to discuss how Microsoft can contribute to the jQuery project. Today, Scott Guthrie announced in his second-day MIX keynote that Microsoft is throwing its weight behind jQuery Read More......(read more)

    Read the article

  • Microsoft and jQuery

    - by Rick Strahl
    The jQuery JavaScript library has been steadily getting more popular and with recent developments from Microsoft, jQuery is also getting ever more exposure on the ASP.NET platform including now directly from Microsoft. jQuery is a light weight, open source DOM manipulation library for JavaScript that has changed how many developers think about JavaScript. You can download it and find more information on jQuery on www.jquery.com. For me jQuery has had a huge impact on how I develop Web applications and was probably the main reason I went from dreading to do JavaScript development to actually looking forward to implementing client side JavaScript functionality. It has also had a profound impact on my JavaScript skill level for me by seeing how the library accomplishes things (and often reviewing the terse but excellent source code). jQuery made an uncomfortable development platform (JavaScript + DOM) a joy to work on. Although jQuery is by no means the only JavaScript library out there, its ease of use, small size, huge community of plug-ins and pure usefulness has made it easily the most popular JavaScript library available today. As a long time jQuery user, I’ve been excited to see the developments from Microsoft that are bringing jQuery to more ASP.NET developers and providing more integration with jQuery for ASP.NET’s core features rather than relying on the ASP.NET AJAX library. Microsoft and jQuery – making Friends jQuery is an open source project but in the last couple of years Microsoft has really thrown its weight behind supporting this open source library as a supported component on the Microsoft platform. When I say supported I literally mean supported: Microsoft now offers actual tech support for jQuery as part of their Product Support Services (PSS) as jQuery integration has become part of several of the ASP.NET toolkits and ships in several of the default Web project templates in Visual Studio 2010. The ASP.NET MVC 3 framework (still in Beta) also uses jQuery for a variety of client side support features including client side validation and we can look forward toward more integration of client side functionality via jQuery in both MVC and WebForms in the future. In other words jQuery is becoming an optional but included component of the ASP.NET platform. PSS support means that support staff will answer jQuery related support questions as part of any support incidents related to ASP.NET which provides some piece of mind to some corporate development shops that require end to end support from Microsoft. In addition to including jQuery and supporting it, Microsoft has also been getting involved in providing development resources for extending jQuery’s functionality via plug-ins. Microsoft’s last version of the Microsoft Ajax Library – which is the successor to the native ASP.NET AJAX Library – included some really cool functionality for client templates, databinding and localization. As it turns out Microsoft has rebuilt most of that functionality using jQuery as the base API and provided jQuery plug-ins of these components. Very recently these three plug-ins were submitted and have been approved for inclusion in the official jQuery plug-in repository and been taken over by the jQuery team for further improvements and maintenance. Even more surprising: The jQuery-templates component has actually been approved for inclusion in the next major update of the jQuery core in jQuery V1.5, which means it will become a native feature that doesn’t require additional script files to be loaded. Imagine this – an open source contribution from Microsoft that has been accepted into a major open source project for a core feature improvement. Microsoft has come a long way indeed! What the Microsoft Involvement with jQuery means to you For Microsoft jQuery support is a strategic decision that affects their direction in client side development, but nothing stopped you from using jQuery in your applications prior to Microsoft’s official backing and in fact a large chunk of developers did so readily prior to Microsoft’s announcement. Official support from Microsoft brings a few benefits to developers however. jQuery support in Visual Studio 2010 means built-in support for jQuery IntelliSense, automatically added jQuery scripts in many projects types and a common base for client side functionality that actually uses what most developers are already using. If you have already been using jQuery and were worried about straying from the Microsoft line and their internal Microsoft Ajax Library – worry no more. With official support and the change in direction towards jQuery Microsoft is now following along what most in the ASP.NET community had already been doing by using jQuery, which is likely the reason for Microsoft’s shift in direction in the first place. ASP.NET AJAX and the Microsoft AJAX Library weren’t bad technology – there was tons of useful functionality buried in these libraries. However, these libraries never got off the ground, mainly because early incarnations were squarely aimed at control/component developers rather than application developers. For all the functionality that these controls provided for control developers they lacked in useful and easily usable application developer functionality that was easily accessible in day to day client side development. The result was that even though Microsoft shipped support for these tools in the box (in .NET 3.5 and 4.0), other than for the internal support in ASP.NET for things like the UpdatePanel and the ASP.NET AJAX Control Toolkit as well as some third party vendors, the Microsoft client libraries were largely ignored by the developer community opening the door for other client side solutions. Microsoft seems to be acknowledging developer choice in this case: Many more developers were going down the jQuery path rather than using the Microsoft built libraries and there seems to be little sense in continuing development of a technology that largely goes unused by the majority of developers. Kudos for Microsoft for recognizing this and gracefully changing directions. Note that even though there will be no further development in the Microsoft client libraries they will continue to be supported so if you’re using them in your applications there’s no reason to start running for the exit in a panic and start re-writing everything with jQuery. Although that might be a reasonable choice in some cases, jQuery and the Microsoft libraries work well side by side so that you can leave existing solutions untouched even as you enhance them with jQuery. The Microsoft jQuery Plug-ins – Solid Core Features One of the most interesting developments in Microsoft’s embracing of jQuery is that Microsoft has started contributing to jQuery via standard mechanism set for jQuery developers: By submitting plug-ins. Microsoft took some of the nicest new features of the unpublished Microsoft Ajax Client Library and re-wrote these components for jQuery and then submitted them as plug-ins to the jQuery plug-in repository. Accepted plug-ins get taken over by the jQuery team and that’s exactly what happened with the three plug-ins submitted by Microsoft with the templating plug-in even getting slated to be published as part of the jQuery core in the next major release (1.5). The following plug-ins are provided by Microsoft: jQuery Templates – a client side template rendering engine jQuery Data Link – a client side databinder that can synchronize changes without code jQuery Globalization – provides formatting and conversion features for dates and numbers The first two are ports of functionality that was slated for the Microsoft Ajax Library while functionality for the globalization library provides functionality that was already found in the original ASP.NET AJAX library. To me all three plug-ins address a pressing need in client side applications and provide functionality I’ve previously used in other incarnations, but with more complete implementations. Let’s take a close look at these plug-ins. jQuery Templates http://api.jquery.com/category/plugins/templates/ Client side templating is a key component for building rich JavaScript applications in the browser. Templating on the client lets you avoid from manually creating markup by creating DOM nodes and injecting them individually into the document via code. Rather you can create markup templates – similar to the way you create classic ASP server markup – and merge data into these templates to render HTML which you can then inject into the document or replace existing content with. Output from templates are rendered as a jQuery matched set and can then be easily inserted into the document as needed. Templating is key to minimize client side code and reduce repeated code for rendering logic. Instead a single template can be used in many places for updating and adding content to existing pages. Further if you build pure AJAX interfaces that rely entirely on client rendering of the initial page content, templates allow you to a use a single markup template to handle all rendering of each specific HTML section/element. I’ve used a number of different client rendering template engines with jQuery in the past including jTemplates (a PHP style templating engine) and a modified version of John Resig’s MicroTemplating engine which I built into my own set of libraries because it’s such a commonly used feature in my client side applications. jQuery templates adds a much richer templating model that allows for sub-templates and access to the data items. Like John Resig’s original Micro Template engine, the core basics of the templating engine create JavaScript code which means that templates can include JavaScript code. To give you a basic idea of how templates work imagine I have an application that downloads a set of stock quotes based on a symbol list then displays them in the document. To do this you can create an ‘item’ template that describes how each of the quotes is renderd as a template inside of the document: <script id="stockTemplate" type="text/x-jquery-tmpl"> <div id="divStockQuote" class="errordisplay" style="width: 500px;"> <div class="label">Company:</div><div><b>${Company}(${Symbol})</b></div> <div class="label">Last Price:</div><div>${LastPrice}</div> <div class="label">Net Change:</div><div> {{if NetChange > 0}} <b style="color:green" >${NetChange}</b> {{else}} <b style="color:red" >${NetChange}</b> {{/if}} </div> <div class="label">Last Update:</div><div>${LastQuoteTimeString}</div> </div> </script> The ‘template’ is little more than HTML with some markup expressions inside of it that define the template language. Notice the embedded ${} expressions which reference data from the quote objects returned from an AJAX call on the server. You can embed any JavaScript or value expression in these template expressions. There are also a number of structural commands like {{if}} and {{each}} that provide for rudimentary logic inside of your templates as well as commands ({{tmpl}} and {{wrap}}) for nesting templates. You can find more about the full set of markup expressions available in the documentation. To load up this data you can use code like the following: <script type="text/javascript"> //var Proxy = new ServiceProxy("../PageMethods/PageMethodsService.asmx/"); $(document).ready(function () { $("#btnGetQuotes").click(GetQuotes); }); function GetQuotes() { var symbols = $("#txtSymbols").val().split(","); $.ajax({ url: "../PageMethods/PageMethodsService.asmx/GetStockQuotes", data: JSON.stringify({ symbols: symbols }), // parameter map type: "POST", // data has to be POSTed contentType: "application/json", timeout: 10000, dataType: "json", success: function (result) { var quotes = result.d; var jEl = $("#stockTemplate").tmpl(quotes); $("#quoteDisplay").empty().append(jEl); }, error: function (xhr, status) { alert(status + "\r\n" + xhr.responseText); } }); }; </script> In this case an ASMX AJAX service is called to retrieve the stock quotes. The service returns an array of quote objects. The result is returned as an object with the .d property (in Microsoft service style) that returns the actual array of quotes. The template is applied with: var jEl = $("#stockTemplate").tmpl(quotes); which selects the template script tag and uses the .tmpl() function to apply the data to it. The result is a jQuery matched set of elements that can then be appended to the quote display element in the page. The template is merged against an array in this example. When the result is an array the template is automatically applied to each each array item. If you pass a single data item – like say a stock quote – the template works exactly the same way but is applied only once. Templates also have access to a $data item which provides the current data item and information about the tempalte that is currently executing. This makes it possible to keep context within the context of the template itself and also to pass context from a parent template to a child template which is very powerful. Templates can be evaluated by using the template selector and calling the .tmpl() function on the jQuery matched set as shown above or you can use the static $.tmpl() function to provide a template as a string. This allows you to dynamically create templates in code or – more likely – to load templates from the server via AJAX calls. In short there are options The above shows off some of the basics, but there’s much for functionality available in the template engine. Check the documentation link for more information and links to additional examples. The plug-in download also comes with a number of examples that demonstrate functionality. jQuery templates will become a native component in jQuery Core 1.5, so it’s definitely worthwhile checking out the engine today and get familiar with this interface. As much as I’m stoked about templating becoming part of the jQuery core because it’s such an integral part of many applications, there are also a couple shortcomings in the current incarnation: Lack of Error Handling Currently if you embed an expression that is invalid it’s simply not rendered. There’s no error rendered into the template nor do the various  template functions throw errors which leaves finding of bugs as a runtime exercise. I would like some mechanism – optional if possible – to be able to get error info of what is failing in a template when it’s rendered. No String Output Templates are always rendered into a jQuery matched set and there’s no way that I can see to directly render to a string. String output can be useful for debugging as well as opening up templating for creating non-HTML string output. Limited JavaScript Access Unlike John Resig’s original MicroTemplating Engine which was entirely based on JavaScript code generation these templates are limited to a few structured commands that can ‘execute’. There’s no code execution inside of script code which means you’re limited to calling expressions available in global objects or the data item passed in. This may or may not be a big deal depending on the complexity of your template logic. Error handling has been discussed quite a bit and it’s likely there will be some solution to that particualar issue by the time jQuery templates ship. The others are relatively minor issues but something to think about anyway. jQuery Data Link http://api.jquery.com/category/plugins/data-link/ jQuery Data Link provides the ability to do two-way data binding between input controls and an underlying object’s properties. The typical scenario is linking a textbox to a property of an object and have the object updated when the text in the textbox is changed and have the textbox change when the value in the object or the entire object changes. The plug-in also supports converter functions that can be applied to provide the conversion logic from string to some other value typically necessary for mapping things like textbox string input to say a number property and potentially applying additional formatting and calculations. In theory this sounds great, however in reality this plug-in has some serious usability issues. Using the plug-in you can do things like the following to bind data: person = { firstName: "rick", lastName: "strahl"}; $(document).ready( function() { // provide for two-way linking of inputs $("form").link(person); // bind to non-input elements explicitly $("#objFirst").link(person, { firstName: { name: "objFirst", convertBack: function (value, source, target) { $(target).text(value); } } }); $("#objLast").link(person, { lastName: { name: "objLast", convertBack: function (value, source, target) { $(target).text(value); } } }); }); This code hooks up two-way linking between a couple of textboxes on the page and the person object. The first line in the .ready() handler provides mapping of object to form field with the same field names as properties on the object. Note that .link() does NOT bind items into the textboxes when you call .link() – changes are mapped only when values change and you move out of the field. Strike one. The two following commands allow manual binding of values to specific DOM elements which is effectively a one-way bind. You specify the object and a then an explicit mapping where name is an ID in the document. The converter is required to explicitly assign the value to the element. Strike two. You can also detect changes to the underlying object and cause updates to the input elements bound. Unfortunately the syntax to do this is not very natural as you have to rely on the jQuery data object. To update an object’s properties and get change notification looks like this: function updateFirstName() { $(person).data("firstName", person.firstName + " (code updated)"); } This works fine in causing any linked fields to be updated. In the bindings above both the firstName input field and objFirst DOM element gets updated. But the syntax requires you to use a jQuery .data() call for each property change to ensure that the changes are tracked properly. Really? Sure you’re binding through multiple layers of abstraction now but how is that better than just manually assigning values? The code savings (if any) are going to be minimal. As much as I would like to have a WPF/Silverlight/Observable-like binding mechanism in client script, this plug-in doesn’t help much towards that goal in its current incarnation. While you can bind values, the ‘binder’ is too limited to be really useful. If initial values can’t be assigned from the mappings you’re going to end up duplicating work loading the data using some other mechanism. There’s no easy way to re-bind data with a different object altogether since updates trigger only through the .data members. Finally, any non-input elements have to be bound via code that’s fairly verbose and frankly may be more voluminous than what you might write by hand for manual binding and unbinding. Two way binding can be very useful but it has to be easy and most importantly natural. If it’s more work to hook up a binding than writing a couple of lines to do binding/unbinding this sort of thing helps very little in most scenarios. In talking to some of the developers the feature set for Data Link is not complete and they are still soliciting input for features and functionality. If you have ideas on how you want this feature to be more useful get involved and post your recommendations. As it stands, it looks to me like this component needs a lot of love to become useful. For this component to really provide value, bindings need to be able to be refreshed easily and work at the object level, not just the property level. It seems to me we would be much better served by a model binder object that can perform these binding/unbinding tasks in bulk rather than a tool where each link has to be mapped first. I also find the choice of creating a jQuery plug-in questionable – it seems a standalone object – albeit one that relies on the jQuery library – would provide a more intuitive interface than the current forcing of options onto a plug-in style interface. Out of the three Microsoft created components this is by far the least useful and least polished implementation at this point. jQuery Globalization http://github.com/jquery/jquery-global Globalization in JavaScript applications often gets short shrift and part of the reason for this is that natively in JavaScript there’s little support for formatting and parsing of numbers and dates. There are a number of JavaScript libraries out there that provide some support for globalization, but most are limited to a particular portion of globalization. As .NET developers we’re fairly spoiled by the richness of APIs provided in the framework and when dealing with client development one really notices the lack of these features. While you may not necessarily need to localize your application the globalization plug-in also helps with some basic tasks for non-localized applications: Dealing with formatting and parsing of dates and time values. Dates in particular are problematic in JavaScript as there are no formatters whatsoever except the .toString() method which outputs a verbose and next to useless long string. With the globalization plug-in you get a good chunk of the formatting and parsing functionality that the .NET framework provides on the server. You can write code like the following for example to format numbers and dates: var date = new Date(); var output = $.format(date, "MMM. dd, yy") + "\r\n" + $.format(date, "d") + "\r\n" + // 10/25/2010 $.format(1222.32213, "N2") + "\r\n" + $.format(1222.33, "c") + "\r\n"; alert(output); This becomes even more useful if you combine it with templates which can also include any JavaScript expressions. Assuming the globalization plug-in is loaded you can create template expressions that use the $.format function. Here’s the template I used earlier for the stock quote again with a couple of formats applied: <script id="stockTemplate" type="text/x-jquery-tmpl"> <div id="divStockQuote" class="errordisplay" style="width: 500px;"> <div class="label">Company:</div><div><b>${Company}(${Symbol})</b></div> <div class="label">Last Price:</div> <div>${$.format(LastPrice,"N2")}</div> <div class="label">Net Change:</div><div> {{if NetChange > 0}} <b style="color:green" >${NetChange}</b> {{else}} <b style="color:red" >${NetChange}</b> {{/if}} </div> <div class="label">Last Update:</div> <div>${$.format(LastQuoteTime,"MMM dd, yyyy")}</div> </div> </script> There are also parsing methods that can parse dates and numbers from strings into numbers easily: alert($.parseDate("25.10.2010")); alert($.parseInt("12.222")); // de-DE uses . for thousands separators As you can see culture specific options are taken into account when parsing. The globalization plugin provides rich support for a variety of locales: Get a list of all available cultures Query cultures for culture items (like currency symbol, separators etc.) Localized string names for all calendar related items (days of week, months) Generated off of .NET’s supported locales In short you get much of the same functionality that you already might be using in .NET on the server side. The plugin includes a huge number of locales and an Globalization.all.min.js file that contains the text defaults for each of these locales as well as small locale specific script files that define each of the locale specific settings. It’s highly recommended that you NOT use the huge globalization file that includes all locales, but rather add script references to only those languages you explicitly care about. Overall this plug-in is a welcome helper. Even if you use it with a single locale (like en-US) and do no other localization, you’ll gain solid support for number and date formatting which is a vital feature of many applications. Changes for Microsoft It’s good to see Microsoft coming out of its shell and away from the ‘not-built-here’ mentality that has been so pervasive in the past. It’s especially good to see it applied to jQuery – a technology that has stood in drastic contrast to Microsoft’s own internal efforts in terms of design, usage model and… popularity. It’s great to see that Microsoft is paying attention to what customers prefer to use and supporting the customer sentiment – even if it meant drastically changing course of policy and moving into a more open and sharing environment in the process. The additional jQuery support that has been introduced in the last two years certainly has made lives easier for many developers on the ASP.NET platform. It’s also nice to see Microsoft submitting proposals through the standard jQuery process of plug-ins and getting accepted for various very useful projects. Certainly the jQuery Templates plug-in is going to be very useful to many especially since it will be baked into the jQuery core in jQuery 1.5. I hope we see more of this type of involvement from Microsoft in the future. Kudos!© Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery  ASP.NET  

    Read the article

  • Cheatsheet: 2010 04.01 ~ 04.07

    - by gOODiDEA
    Web Web Performance Best Practices: How masters.com re-designed their site to boost performance – and what that re-design missed What’s wrong with extending the DOM John Resig on Advanced Javascript to Improve your Web App .NET Hammock for REST - a REST library for .NET Programming Windows Phone 7 Series by Charlez Petzold – Free EBook Testing the Lock-Free Queue Some Last-Minute New C# 4.0 Features - while (x --> 0) { Console.WriteLine("x = {0}", x); } Better Coding with Visual Studio 2010 Revisiting Asynchronous ASP.NET Pages Database Understanding RAID for SQL Server – Part 2 Cassandra Jump Start For The Windows Developer Cassandra Internals – Writing - Cassandra Write Operation Performance Explained Cassandra Internals – Reading - Cassandra Reads Performance Explained MongoDB Growing Up: Release 1.4 and Commercial Support by 10gen Why NoSQL Will Not Die How Many Hard Drives Do I Need to Support SQL Server? Other Presentation: CouchDB and Lucene MongoDB Cacti Graphs HBase vs Cassandra: why we moved How to use the DedicatedDumpFile registry value to overcome space limitations on the system drive when capturing a system memory dump

    Read the article

  • Do you contribute to open-source software?

    - by pablo
    Recently John Resig (creator of the jQuery library) wrote on his twitter that "When it comes to hiring, I'll take a Github commit log over a resume any day.". As much as I respect that (motivating developers to give back to the community), it also puzzles me, as not all of us have the opportunity to do so, for a number of reasons (family, employer agreements, etc). How would you make a case for the non-contributor developer? Do you think that developers that do not contribute to open-source software are doomed from certain kinds of organizations?

    Read the article

  • Under what circumstances is jQuery's document.ready() not required?

    - by Phil.Wheeler
    While John Resig's recommendation is, quite rightly, to declare all events within a jquery.document.ready() function, I know that you don't actually have to put everything in there. In fact, there are cases where it may be more appropriate to deliberately put methods outside of the ready event. But what are those cases? Obviously best practice dictates that all events are declared within the ready event, so what would best practice be for declarations outside that event?

    Read the article

  • How and what benefit i can take from included Sizzle.js along with jquery 1.4.2?

    - by metal-gear-solid
    latest jquery 1.4.2 downloaded from jquery.com comes with Sizzle.js also. How and what benefit i can take from included Sizzle.js? /*! * jQuery JavaScript Library v1.4.2 * http://jquery.com/ * * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2010, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * * Date: Sat Feb 13 22:33:48 2010 -0500 */

    Read the article

  • jQuery live search

    - by Barbara
    I really like the search function on iA and I was wondering how they did it. I found ejohn.org/blog/jquery-livesearch/ by John Resig but I still don't how to: add the counter (128/128 - the number encreases and decreases) highlight the word I'm searching in the text

    Read the article

  • Unfamiliar Javascript Syntax

    - by user1051643
    Long and short of the story is, whilst reading John Resig's blog (specifically http://ejohn.org/blog/javascript-trie-performance-analysis/) I came across a line which makes absolutely no sense to me whatsoever. Essentially it boils down to object = object[key] = something; (this can be found in the first code block of the article I've linked.) This has proven rather difficult to google, so if anyone can offer some insight / a good online resource for me to learn for myself, I'd much appreciate it.

    Read the article

  • Netflix, jQuery, JSONP, and OData

    - by Stephen Walther
    At the last MIX conference, Netflix announced that they are exposing their catalog of movie information using the OData protocol. This is great news! This means that you can take advantage of all of the advanced OData querying features against a live database of Netflix movies. In this blog entry, I’ll demonstrate how you can use Netflix, jQuery, JSONP, and OData to create a simple movie lookup form. The form enables you to enter a movie title, or part of a movie title, and display a list of matching movies. For example, Figure 1 illustrates the movies displayed when you enter the value robot into the lookup form.   Using the Netflix OData Catalog API You can learn about the Netflix OData Catalog API at the following website: http://developer.netflix.com/docs/oData_Catalog The nice thing about this website is that it provides plenty of samples. It also has a good general reference for OData. For example, the website includes a list of OData filter operators and functions. The Netflix Catalog API exposes 4 top-level resources: Titles – A database of Movie information including interesting movie properties such as synopsis, BoxArt, and Cast. People – A database of people information including interesting information such as Awards, TitlesDirected, and TitlesActedIn. Languages – Enables you to get title information in different languages. Genres – Enables you to get title information for specific movie genres. OData is REST based. This means that you can perform queries by putting together the right URL. For example, if you want to get a list of the movies that were released after 2010 and that had an average rating greater than 4 then you can enter the following URL in the address bar of your browser: http://odata.netflix.com/Catalog/Titles?$filter=ReleaseYear gt 2010&AverageRating gt 4 Entering this URL returns the movies in Figure 2. Creating the Movie Lookup Form The complete code for the Movie Lookup form is contained in Listing 1. Listing 1 – MovieLookup.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Netflix with jQuery</title> <style type="text/css"> #movieTemplateContainer div { width:400px; padding: 10px; margin: 10px; border: black solid 1px; } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script src="App_Scripts/Microtemplates.js" type="text/javascript"></script> </head> <body> <label>Search Movies:</label> <input id="movieName" size="50" /> <button id="btnLookup">Lookup</button> <div id="movieTemplateContainer"></div> <script id="movieTemplate" type="text/html"> <div> <img src="<%=BoxArtSmallUrl %>" /> <strong><%=Name%></strong> <p> <%=Synopsis %> </p> </div> </script> <script type="text/javascript"> $("#btnLookup").click(function () { // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); }); function callback(result) { // unwrap result var movies = result["d"]["results"]; // show movies in template var showMovie = tmpl("movieTemplate"); var html = ""; for (var i = 0; i < movies.length; i++) { // flatten movie movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl; // render with template html += showMovie(movies[i]); } $("#movieTemplateContainer").html(html); } </script> </body> </html> The HTML page in Listing 1 includes two JavaScript libraries: <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script src="App_Scripts/Microtemplates.js" type="text/javascript"></script> The first script tag retrieves jQuery from the Microsoft Ajax CDN. You can learn more about the Microsoft Ajax CDN by visiting the following website: http://www.asp.net/ajaxLibrary/cdn.ashx The second script tag is used to reference Resig’s micro-templating library. Because I want to use a template to display each movie, I need this library: http://ejohn.org/blog/javascript-micro-templating/ When you enter a value into the Search Movies input field and click the button, the following JavaScript code is executed: // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); This code Is used to build a query that will be executed against the Netflix Catalog API. For example, if you enter the search phrase King Kong then the following URL is created: http://odata.netflix.com/Catalog/Titles?$filter=substringof(‘King%20Kong’,Name)&$callback=callback&$format=json This query includes the following parameters: $filter – You assign a filter expression to this parameter to filter the movie results. $callback – You assign the name of a JavaScript callback method to this parameter. OData calls this method to return the movie results. $format – you assign either the value json or xml to this parameter to specify how the format of the movie results. Notice that all of the OData parameters -- $filter, $callback, $format -- start with a dollar sign $. The Movie Lookup form uses JSONP to retrieve data across the Internet. Because WCF Data Services supports JSONP, and Netflix uses WCF Data Services to expose movies using the OData protocol, you can use JSONP when interacting with the Netflix Catalog API. To learn more about using JSONP with OData, see Pablo Castro’s blog: http://blogs.msdn.com/pablo/archive/2009/02/25/adding-support-for-jsonp-and-url-controlled-format-to-ado-net-data-services.aspx The actual JSONP call is performed by calling the $.ajax() method. When this call successfully completes, the JavaScript callback() method is called. The callback() method looks like this: function callback(result) { // unwrap result var movies = result["d"]["results"]; // show movies in template var showMovie = tmpl("movieTemplate"); var html = ""; for (var i = 0; i < movies.length; i++) { // flatten movie movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl; // render with template html += showMovie(movies[i]); } $("#movieTemplateContainer").html(html); } The movie results from Netflix are passed to the callback method. The callback method takes advantage of Resig’s micro-templating library to display each of the movie results. A template used to display each movie is passed to the tmpl() method. The movie template looks like this: <script id="movieTemplate" type="text/html"> <div> <img src="<%=BoxArtSmallUrl %>" /> <strong><%=Name%></strong> <p> <%=Synopsis %> </p> </div> </script>   This template looks like a server-side ASP.NET template. However, the template is rendered in the client (browser) instead of the server. Summary The goal of this blog entry was to demonstrate how well jQuery works with OData. We managed to use a number of interesting open-source libraries and open protocols while building the Movie Lookup form including jQuery, JSONP, JSON, and OData.

    Read the article

  • Leaving Microsoft

    - by Stephen Walther
    After two and a half years working with the ASP.NET team, I’ve decided that this is the right time to leave Microsoft and, with the help of some friends, re-launch my ASP.NET training and consulting company. The company has the modest name Superexpert. While working on my Ph.D. at MIT, I was surrounded by professors and students who were passionate about knowledge. During the Internet boom, I was lucky enough to work side-by-side with some very smart and hard-working people to create several successful startups. However, the people I worked with at Microsoft were among the smartest and hardest working. Microsoft hires a small number of people and gives them huge responsibilities. It continues to amaze me that so few people work on the ASP.NET team when you consider how much the team produces. I had the opportunity to work with a number of inspiring people at Microsoft. I’ll miss working with Scott Hunter, Dave Reed, Boris Moore, Eilon Lipton, Scott Guthrie, James Senior, Jim Wang, Phil Haack, Damian Edwards, Vishal Joshi, Mike Pope, Jon Young, Dmitry Robsman, Simon Calvert, Stefan Schackow, and many others. I’m proud of what we accomplished while I was working at Microsoft. We reached out to the jQuery team and changed direction from Microsoft Ajax to jQuery. We successfully contributed several important new features to the open-source jQuery project including jQuery Templates, jQuery Data-Linking, jQuery Globalization, and (as John Resig announced at the last jQuery conference) jQuery Require. I’m looking forward to returning to training and consulting. We want to focus on providing consulting on the “right way” of building ASP.NET websites, which we call Modern ASP.NET applications. By Modern ASP.NET applications, I mean applications built with ASP.NET MVC, jQuery, HTML5, and Visual Studio ALM. Additionally, we want to help companies that have existing ASP.NET Web Forms applications migrate to ASP.NET MVC. If you are interested in having us provide training for your company or you need help building a custom ASP.NET application then please contact us at [email protected] or visit our website at Superexpert.com.

    Read the article

1 2  | Next Page >