Have you seen the Chrome Extension that helps you with Knockout development? It adds a section to the Elements tab in the development tools that shows you the current binding context for any element you select on the DOM. This is a great tool to have when developing with Knockout.
When working with KnockoutJS, the
with binding allows you to change the current binding context. So if you have a nested data structure, instead of having to binding to properties such as
subViewModel.property2, you can put them inside a
with binding and then refer to them directly as
This is quite useful in keeping your views from getting too cluttered when your viewmodel structure gets large. However, if you jump down more than one level in a single the
with binding, it’s not immediately apparent what the
$parent context will refer to.
Having written both an IE extension and a Chrome extension, I must say that writing the Chrome extension was a far, far better experience. Let’s just say that I really don’t want to ever write an IE extension again.
For the IE extension, you have conflicting forum posts and MSDN articles from years ago that only partially apply to the current version of IE, and there isn’t any real documentation or developer’s guide to speak of. You can write the IE extension in C#, but there is no guidance on how to do so, and the prevailing advice is to write the extension in C++.
Now that I’ve finished my rant, let’s leave IE behind and focus on Chrome.
Today, we’ll be looking at adding internationalization (i18n) support to a Chrome Extension. We’ll also look at a pattern that uses the
data-* attribute in HTML5 to provide clean markup that gets internationalized.
The typical pattern for using this event is as follows:
return "You have not saved your work."
onbeforeunload to a function that returns a string. The string will show up in a dialog box like this when navigating away:
This has been around for a while. But I wanted to be able to do this in a way that used the MVVM pattern in Knockout. I wanted to have this controlled by data binding between my markup and viewmodel.
You will see a ‘Hello World’ alert when you click the bookmark (don’t forget to turn on your bookmark toolbar in your web browser so you have a place to put your bookmarklets).
However, as with all things related to web development, things don’t always work the same on all web browsers. I was recently working with a bookmarklet that needed to wait until the page was finished loading before it did anything, so I used the setTimeout method, like this (Broken Bookmarklet Demo):
This worked great! And then I tried it on Firefox, and it didn’t work. On Firefox, it would cause my entire page to disappear and be replaced with an integer that varied between 2 and several thousand. Hmm… that’s weird.
After digging around, I found the solution in a helpful post on StackOverflow. It turns out that in Firefox, if a bookmarklet returns a truthy value, the page is replaced with the value, which is the behavior I was seeing. The SetTimeout function returns an integer that can be used to later control the waiting timer. Firefox saw the integer, a truthy value, that was returned from the bookmarklet, and replaced the page with that integer.
Now that we know why Firefox is behaving strangely, we can fix the problem. All we have to do is get the bookmarklet to return a falsy value. So we’ll add
void(0); to the end of our bookmarklet (Fixed Bookmarklet Demo).
Our bookmarklet is now fixed, and works properly in Firefox.