Tag Archives: MVVM


Backbone, ember, knockout算是比较火的三个前端MV*框架,受到Knockout.js vs Backbone.js文章的蛊惑,我决定尝试一下knockout。文中称Backbone的优势在于,对Rest接口的后台进行了一个很好的model,也就是说是一个不错的ORM(这个比喻让写过后台的人秒懂啊有木有!),而对于DOM操作,这种属于controler范围的东西,Backbone没有一个集中编写的位置,也没有提供任何方便,你需要自己用jquery去操纵。因此,Backbone非常_“灵活”_。





<p data-bind="text: question"></p>
<select data-bind="options: [1,2,3,4,5], value: points"></select>

这里就是对p元素绑定text类型的变量question。question是在js中的ViewModel中定义的,具体绑定细节就请移步教程~ question是一个observable

question = ko.observable("Are you hungry?")


question("Are you happy?") //change value
question()    //read value



<h3 data-bind="visible: value() > 3 ">value居然大于3了</h3>


<button href="#” data-bind="enable: value()>3, click: onclick"></button>





ko.bindingHandlers.yourhandler = {
    init: function(element, accessValue){},
    update: function(element, accessValue){}





<p data-bind="yourhandler: value"></p>


$(element).hover(function(){}, function(){})
$("span", element).each(function(){ $(this).addClass('span'); })

Viewport & media query in design for mobile

Responsive design is undoubtly the trend to design a website for both big screen and mobile screen. The magic lies on the media query in CSS.

What media query do?

It query how the screen or device that presenting the web page looks like. For example, how long is the device width, a 1024px screen or a 640px one.

Like this (in html file):

<link rel="stylesheet" media="screen and (color)" href="example.css" />

or like this (in css file):

@media all and (min-width:500px) { /* your css here */ }

So, you can change your css responsively and respectively as the screen changes.

What viewport do?

Another relative technique is the viewport. It is created by Safari and can hardly be a standard. But it is there to be used. When a mobile device render a traditional web page in a little screen, to avoid using a narrow width to make the page looks weird (for those has never been developed to fit mobile screens), the browser use a larger screen, say, 980px, to render the page. Then the browser zooms out to fit the content to the 320px screen. If you don’t want your site be zoomed out, you can use this:

<meta name="viewport" content="width=device-width">

Then, the web page is rendered as a device-width browser, it will look like a narrowed desktop browser by dragging.

No picture means nothing (No pic you say a jb)

fixed, device-width viewport
fixed, default viewport
flexible, device-width viewport
flexible, default viewport

So what?

With device-width viewport, at least your font-size would be as normal and clear to read. If you use flexible or fixed design in your website only, you should not modify the viewport, for that users would zoom in & out to read your content, while your layout wouldn’t go weird.

Anything to do with media query?

Of course! If you use media query to use defferent css in defferent screen-size, you would absolutely get the best and optimized effect of your sites. But that would be quite a lot of work.

For more reference, check out here:

Media Queries, W3C Recommendation 19 June 2012

Using the viewport meta tag to control layout on mobile browsers