Tag Archives: MVVM

knockoutjs初探——MVVM框架

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

继续Knockout。Knockout有个牛逼的在线教程,灰常有用。

Textarea和p

在前端实现MVC框架都有一个问题,View可能会接受大量用户输入,并进行改变。

Knockout对input类型和p类型都可以进行model的绑定,

<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的值时,使用

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

让人想起来setters和getters啊。question的值一旦改变,所有data-bind相关的view都会改变。

text这个类型,很明显是一个文档值类型,我们可以相见,还会有html类型用来直接传入html。Knockout的模板当然不止提供这些,还提供例如:foreach(循环block内部的内容),visible(满足条件才可视),click等等。例如:

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

只有当value()的值大于3的时候才会显示h3的内容

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

相当于绑定了一个回调函数。

显然,你也可以自定义,这个成为bindingHandlers。

bindingHandlers的init和update

bingingHandler的定义如下:

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

update很好理解,当元素内容发生改变的时候,通过选中$(element),利用accessValue()里的值进行操作。这个accessValue就是html中跟在visible或者text或者yourhandler后面的值,需要通过accessValue()调用返回。

init是什么的?一般需要自定义handler是希望实现一些动画,但是,如果只有update,当页面第一次加载的时候,只能执行update中的例如,fadeOut()动画,于是,页面就相当于闪了一下,多不和谐。于是,你可以自定义init来改变handler第一次加载时的行为。

真贴心啊!

于是,你就可以这样写了。

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

init在页面加载的时候只执行一次,这意味着!可以在里面再另外写一些辅助性的绑定哦~~~

//...    
$(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

坑爹的viewport