StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>We are just starting down this path at work, and so are not quite sure what we're doing. But here's the idea we have.</p> <p>The page should be composed of any number of "components," possibly nested. Each component has a view model and one public method, <code>renderTo(el)</code>, which essentially does</p> <pre><code>ko.applyBindings(viewModelForThisComponent, el) </code></pre> <p>It also could have the ability to render subcomponents.</p> <p>Constructing or updating a component consists of giving it a model (e.g. JSON data from the server), from which it will derive the appropriate view model.</p> <p>The app is then created by nesting a bunch of components, starting with a top-level application component.</p> <hr> <p>Here is an example for a <a href="http://www.barnesandnoble.com/nookstudy/" rel="noreferrer">"hypothetical"</a> book-managing application. The components are <code>LibraryUI</code> (displays a list of all book titles) and <code>DetailsUI</code> (a section of the app that displays details on a book).</p> <pre><code>function libraryBookViewModel(book) { return { title: ko.observable(book.title), showDetails: function () { var detailsUI = new BookDetailsUI(book); detailsUI.renderTo(document.getElementById("book-details")); } }; } function detailsBookViewModel(book) { return { title: ko.observable(book.title), author: ko.observable(book.author), publisher: ko.observable(book.publisher) }; } function LibraryUI(books) { var bookViewModels = books.map(libraryBookViewModel); var viewModel = { books: ko.observableArray(bookViewModels); }; this.renderTo = function (el) { ko.applyBindings(viewModel, el); }; } function BookDetailsUI(book) { var viewModel = detailsBookViewModel(book); this.renderTo = function (el) { ko.applyBindings(viewModel, el); }; } </code></pre> <p>Note how we could make the book details appear in a jQuery UI dialog, instead of in a singleton <code>#book-details</code> element, by changing the <code>showDetails</code> function to do</p> <pre><code>var dialogEl = document.createElement("div"); detailsUI.renderTo(dialogEl); $(dialogEl).dialog(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload