{"id":411,"date":"2012-01-02T21:30:00","date_gmt":"2012-01-03T04:30:00","guid":{"rendered":"http:\/\/blog.monnet-usa.com\/?p=411"},"modified":"2012-01-02T18:07:32","modified_gmt":"2012-01-03T01:07:32","slug":"creating-rich-interactive-web-apps-with-knockout-js-part-4","status":"publish","type":"post","link":"https:\/\/blog.monnet-usa.com\/?p=411","title":{"rendered":"Creating Rich Interactive Web Apps With KnockOut.js – Part 4"},"content":{"rendered":"

Intro <\/a><\/h3>\n

In part 3<\/a> we built a complete working version of the Savings Goal Simulator<\/a> where each view model and view mediator is nicely separated in its own module and corresponding source file. But what about the view? Well the goal of part 4 is to modularize<\/b> and extract each view<\/b> component.<\/p>\n

\"Breaking<\/p>\n

Synopsis Of The Approach <\/a><\/h3>\n

The approach will need to meet the following requirements:<\/p>\n

    \n
  1. The view markup needs to have its own url<\/strong><\/a> and be cacheable<\/li>\n
  2. The view markup needs an ID<\/strong><\/a><\/li>\n
  3. The view should have an HTML element<\/strong><\/a> <\/li>\n
  4. The view HTML element should be renderable<\/strong><\/a><\/li>\n<\/ol>\n
    View Markup With A URL <\/a><\/h5>\n

    Just like script blocks and images can be “sourced” externally from any url, we need a similar mechanism for our views.<\/p>\n

        <view src=\"http:\/\/my.view.html\">\r\n    <\/view>\r\n<\/pre>\n
    So since the script<\/strong> tag allow us to do that already, let’s use it, assign an id, but let’s use a more appropriate type<\/strong> like text\/html<\/strong>. <\/p>\n
        <script src=\"http:\/\/my.view.html\" \r\n            type=\"text\/html\">\r\n    <\/script>\r\n<\/pre>\n
    View Markup With An ID <\/a><\/h5>\n
    To make it possible to reference the “script-view-markup” later on in our page or Javascript code, we’ll just assign the script an ID like so:<\/p>\n
        <script id=\"my-view-markup\"\r\n            src=\"http:\/\/my.view.html\" \r\n            type=\"text\/html\">\r\n    <\/script>\r\n<\/pre>\n
    View HTML Element <\/a><\/h5>\n
    Now that we have a way to define how a view markup can be “included” in our page, we’ll just define our view “container” as a normal HTML element. We can use a “div<\/strong>” or any of the more semantically significant HTML5 elements like “section<\/strong>“:<\/p>\n
        <div id=\"my-view\">\r\n    <\/div>\r\n<\/pre>\n
    What we’re missing is a mechanism to:<\/p>\n