DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > The Importance of Design-Mode for Client-Side MVC

The Importance of Design-Mode for Client-Side MVC

Paul Hammant user avatar by
Paul Hammant
·
Apr. 23, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
2.52K Views

Join the DZone community and get the full member experience.

Join For Free

synopsis: design mode (the same view but without angular or knockout loaded) is a great way to see the multiplicity of the view as you develop.

remember that jbehave ‘story navigator’ blog entry i did a year ago? well, give it a quick click to remind yourself. it has been tidied up some since – as i get better with angular. i forked it on github, to a version that’s published in the same way (github pages) but without javascript running; no angularjs specifically.

here’s a screenshot:

and here’s the link, which is a better way of quickly seeing the shrunken picture above.

http://paul-hammant-fork.github.com/storynavigator/navigator.html

moustache or handlebar style template fields everywhere.

you can see them everywhere – things that would be output text in the final version, but are now just model references in design mode. some are simple field references, some are more compex expressions, or have formatters attached.

only one row versus many in the running version.

there are three rows in the running version, and only one row in the design mode.

multiple alternates concurrently shown in design-mode

the passed or failed icon in in the running version, is now passed and failed (side by side) in design mode:

for each column in the table, according the the design of the jbehave storynavigator, there are three possibilities in respect of sort order:

  • this column is the sorted one in descending order
  • this column is the sorted one in ascending order
  • this column is not the one being sorted

all three of those realities are shown for each column, and it is that which forces the columns far out to the right of the view. there’s an obvious improvement that someone could make to that – as there is no need for me to repeat the text of the column name as it does not change.

summary

hopefully you get to see the beauty of of angular and knockout: you get to see a design preview of the finished page, with all of the components visible, and with css hooked up as it would be in the finished product.

Database

Published at DZone with permission of Paul Hammant, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • A Smarter Redis
  • APIs Outside, Events Inside
  • Real-Time Supply Chain With Apache Kafka in the Food and Retail Industry
  • Take Control of Your Application Security

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo