X

Geertjan's Blog

  • February 14, 2016

Enhanced Binding Syntax for Oracle JET

Geertjan Wielenga
Product Manager

In the previous blog entry, we met "knockout-postbox". Next, let's take a look at "knockout-punches", which gives you new ways of expressing your Knockout bindings.

For example, instead of expressing your "text" bindings like this...

<span data-bind="text: id"></span>
<span data-bind="text: name"></span>

...you'll be able to express them like this, using "handlebar expressions":

<p>{{id}} {{name}}</p>

By the way, if you type 'exp' (without the quotes) in the HTML editor in NetBeans, and then press the TAB key, you should see that the 'exp' is turned into '{{}}', with the cursor in the middle, which is a small feature we created in NetBeans IDE to help Angular users. And now it turns out it's useful for Knockout users, and Oracle JET users, as well!

To set everything up, take similar steps as described previously, i.e., go to the Properties window of your application and this time use the Bower integration to install "knockout.punches", as shown below:

I tweaked the downloaded "knockout.punches" folder a bit, so that it has the same naming format as "knockout-postbox", i.e., I changed the folder name to "knockout-punches", as you can see below:

After that, I opened "main.js" and added "knockout-punches" to the "requirejs.config" section, right beneath "knockout-postbox".

'knockout-punches': 'libs/knockout-punches/knockout-punches',

Then, as described in the documentation, I enabled "knockout-punches", as shown below in bold, in the "require" block, i.e., in the entry point of the application:

require([
'ojs/ojcore',
'knockout',
'jquery',
'ojs/ojknockout','knockout-punches',
'ojs/ojmodule'],
function (oj, ko, $)
{
function RootViewModel() {ko.punches.enableAll();
}
$(document).ready(
function ()
{
ko.applyBindings(
new RootViewModel(),
document.getElementById('mainContent'));
}
);
}
);

That's all you need to do. Now you can experiment with the various features of "knockout-punches" and choose the syntax styles that match your taste and needs.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha