Merge 159156 - Extensions Docs Server: Fix headings with no IDs

chrome/common/extensions/docs/templates/articles/app_frameworks.html

 <h1>MVC Architecture</h1>
 
 
 <p>
 As modern browsers become more powerful with rich features,
 building full-blown web applications in JavaScript is not only feasible,
 but increasingly popular.
 Based on
 <a href="http://httparchive.org/trends.php?s=intersection&minlabel=Jan+20+2011&maxlabel=Jan+15+2012">trends</a>
 on <a href="http://httparchive.org/">HTTP Archive</a>,
@@ skipping 41 matching lines @@
 
 <p>
 MVC is composed of three components:
 </p>
 
 <img src="{{static}}/images/mvc.png"
      width="466"
      height="303"
      alt="model-view-controller">
 
-<h3>Model</h3>
+<h3 id="model">Model</h3>
 
 <p>
 Model is where the application’s data objects are stored.
 The model doesn’t know anything about views and controllers.
 When a model changes, typically it will notify its observers that a change has occurred.
 </p>
 
 <p>
 To understand this further, let’s use the Todo list app, a simple, one page web app that tracks your task list.
 </p>
 
 <br>
 
 <img src="{{static}}/images/todos.png"
      width="444"
      height="366"
      alt="model-view-controller">
 
 <p>
 The model here represents attributes associated
 with each todo item such as description and status.
 When a new todo item is created,
 it is stored in an instance of the model.
 </p>
 
-<h3>View</h3>
+<h3 id="view">View</h3>
 
 <p>
 View is what's presented to the users and how users interact with the app.
 The view is made with HTML, CSS, JavaScript and often templates.
 This part of your Chrome packaged app has access to the DOM.
 </p>
 
 <p>
 For example, in the above todo list web app,
 you can create a view that nicely presents the list of todo items to your users.
 Users can also enter a new todo item through some input format;
 however, the view doesn’t know how to update the model because that’s the controller’s job.
 </p>
 
-<h3>Controller</h3>
+<h3 id="controller">Controller</h3>
 
 <p>
 The controller is the decision maker and the glue between the model and view.
 The controller updates the view when the model changes.
 It also adds event listeners to the view and
 updates the model when the user manipulates the view.
 </p>
 
 <p>
 In the todo list web app,
@@ skipping 43 matching lines @@
 <h2 id="mvcpersistence">MVC persistence patterns</h2>
 
 <p>
 There are many different ways of implementing persistence
 with an MVC framework, each with different trade&ndash;offs.
 When writing Chrome packaged apps,
 choose the frameworks with MVC and persistence patterns
 that feel natural to you and fit you application needs.
 </p>
 
-<h3>Model does its own persistence - ActiveRecord pattern</h3>
+<h3 id="model_persistence">Model does its own persistence - ActiveRecord pattern</h3>
 
 <p>
 Popular in both server&ndash;side frameworks like Ruby on Rails,
 and client-side frameworks like
 <a href="http://backbonejs.org">Backbone.js</a> and
 <a href="http://emberjs.com/">ember.js</a>,
 the ActiveRecord pattern places the responsibility
 for persistence on the model itself
 and is typically implemented via JSON API.
 </p>
@@ skipping 35 matching lines @@
 
 <ul>
         <li>Hard to test since the persistence layer is ‘baked’ into the object hierarchy.</li>
         <li>Having different objects use different persistent stores is difficult
                 (for example, FileSystem APIs vs indexedDB vs server&ndash;side).</li>
         <li>Reusing Model in other applications may create conflicts,
                 such as sharing a single Customer class between two different views,
                 each view wanting to save to different places.</li>
 </ul>
 
-<h3>Controller does persistence</h3>
+<h3 id="controller_persistence">Controller does persistence</h3>
 
 <p>
 In this pattern, the controller holds a reference
 to both the model and a datastore
 and is responsible for keeping the model persisted.
 The controller responds to lifecycle events like Load, Save, Delete,
 and issues commands to the datastore to fetch or update the model. 
 </p>
 
 <p>
 Pros:
 </p>
 
 <ul>
         <li>Easier to test, controller can be passed a mock datastore to write tests against.</li>
         <li>The same model can be reused with multiple datastores just by constructing controllers with different datastores.</li>
 </ul>
 
 <p>
 Cons:
 </p>
 
 <ul>
         <li>Code can be more complex to maintain.</li>
 </ul>
 
-<h3>AppController does persistence</h3>
+<h3 id="app_controller">AppController does persistence</h3>
 
 <p>
 In some patterns, there is a supervising controller responsible
 for navigating between one MVC and another.
 The AppController decides, for example,
 that a ‘Back’ button moves the client from an editing screen
 (which contains MVC widgets/formats),
 to a settings screen.
 </p>
 
@@ skipping 19 matching lines @@
 </ul>
 
 <p>
 Cons:
 </p>
 
 <ul>
         <li>Each ‘Page/Screen’ of the app now requires a lot of boilerplate to write or update: Model, View, Controller, AppController.</li>
 </ul>
 
-<h3>Recommended MVC frameworks</h3>
+<h3 id="recommended">Recommended MVC frameworks</h3>
 
 <p>
 MVC is crucial to designing Chrome packaged apps.
 We recommend the following <a href="app_csp.html">CSP&ndash;Compliant</a> MVC frameworks
 for writing secure and scalable Chrome packaged apps:
 </p>
 
 <ul>
         <li><a href="http://angularjs.org/">AngularJS</a>
                 (<a href="https://github.com/GoogleChrome/textdrive-app">Text Drive Reference App</a>)</li>
         <li><a href="http://kendo.com/">Kendo UI</a>
                 (<a href="https://github.com/GoogleChrome/kendo-photo-booth-app">Photo Booth Reference App</a>)</li>
         <li><a href="http://www.sencha.com/">Sencha</a>
                 (<a href="https://github.com/GoogleChrome/sencha-video-player-app">Video Player Reference App</a>)</li>
 </ul>
 
 <h2 id="resources">Useful resources</h2>
 
-<h3>Online</h3>
+<h3 id="online">Online</h3>
 
 <ul>
         <li><a href="http://www.html5rocks.com/">HTML5Rocks.com</a></li>
         <li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">Learning JavaScript Design Patterns</a>
                 (by Addy Osmani)</li>
         <li><a href="http://addyosmani.github.com/todomvc/">TodoMVC</a></li>
 </ul>
 
-<h3>Books</h3>
+<h3 id="books">Books</h3>
 
 <ul>
         <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X">JavaScript Web Applications</a>
                 (By Alex MacCaw)</li>
         <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a>
                 (By Stoyan Stefonov)</li>
         <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680">Maintainable JavaScript</a>
                 (By Nicolas Z. Zakas)</li>
 </ul>
 
-<p class="backtotop"><a href="#top">Back to top</a></p>
+<p class="backtotop"><a href="#top">Back to top</a></p>