Knockout Js 使用

knockout.js框架 实用用法

这个可以作为knockout.js框架初体验文中,一个中文翻译的补充,因为那个翻译是当时较早版本的,其中有很多内容得到了更新;

 

下面是我在官网学习到的一些中文比较常用的属性:

 

一. foreach遍历绑定

下面是一个例子:

<script>

var viewModel = {

    categories: ko.observableArray([

        { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },

        { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] }

    ])

};

ko.applyBindings(viewModel);

</script>

 

a. $data 便利当前对象

<ul data-bind="foreach: categories">

    <li data-bind="text:$data.name">

    </li>

</ul>

foreach: categories表示遍历viewModel的categories对象中的数组内容,$data就代表viewModel.categories,所以$data.name遍历出来的就是name的属性

效果:

Fruit

Vegetables

 

b. $index 便利的index下标值

<ul data-bind="foreach: categories">

    <li data-bind="text:$index">

    </li>

</ul>

$index表示遍历的是viewModel的categories对象中的数组内容中的下标值1,2,3这种,类似jquery遍历的index

 

c. $parents 上一层元素

<ul data-bind="foreach: categories">

    <li data-bind="text:$parents">

    </li>

</ul>

$parents表示遍历的上一层对象,遍历的当前对象是viewModel的categories,所以$parents就表示viewModel对象

$parents[n] 上n层

 

d. $root 根部

这个表示不管在其中嵌套几层,都是引用根部对象viewModel

 

e. $element 节点元素

这个表示遍历当前的节点dom,是一个dom节点内容

<li data-bind="text:$index"></li>

 

f. as 一个很好的用法

看例子:

<ul data-bind="foreach: { data: categories, as: 'category'}">

    <li>

        <ul data-bind="foreach: { data: items, as: 'item'}">

            <li>

                <span data-bind="text: categories.name"></span>:<span data-bind="text: items"></span>

            </li>

        </ul>

    </li>

</ul>

这个用于双重遍历非常好,as表示一个代替作用:

foreach: { data: categories, as: 'category' }表示需要遍历viewModel的categories这个对象,并且用category代替下面使用中的$data,

foreach: { data: items, as: 'item' }这个表示遍历viewModel的categories这个对象中的items对象,并且用item代替下面使用中的$data,

这样就不会弄混两个$data同时在一个双重遍历中的使用了

 

g. foreach另外一种简便的用法

<ul>

    <li class="header">Header item</li>

   <!-- ko foreach: myItems -->

        <li>Item <span data-bind="text: $data"></span></li>

    <!-- /ko -->

</ul>

<script type="text/javascript">

    ko.applyBindings({

        myItems: [ 'A', 'B', 'C' ]

    });

</script>

ps:其实这种用非常实用,不仅仅是简便,当我们需要便利其中部分li的时候,就只能使用这种用法了,看看这个例子就知道,如果没有简便方法,就只能

<ul>

    <li class="header">Header item</li>

    <ul data-bind="foreach: myItems ">//这里就需要多增加一层ul结构

        <li>Item <span data-bind="text: $data"></span></li>

    </ul>

</ul>

 

 

 

 

h. 一些触发事件callbacks

afterRender 

afterAdd 添加foreach数组中内容后触发

beforeRemove  删除foreach数组中内容触发

beforeMove 

afterMove 

一个例子:

<ul data-bind="foreach: { data: myItems,  afterAdd: yellowFadeIn}">
    <li data-bind="text: $data"></li>
</ul>
<button data-bind="click: addItem">Add</button>
 
<script type="text/javascript">
    ko.applyBindings({
        myItems: ko.observableArray([ 'A', 'B', 'C']),
         yellowFadeIn: function(element, index, data) {
            $(element).filter("li")
                      .animate({ backgroundColor: 'yellow'}, 200)
                      .animate({ backgroundColor: 'white'}, 800);
        },
        addItem: function() { this.myItems.push('New item'); }
    });

</script>

foreach的myItems数组内容增加时触发afterAdd事件,运行yellowFadeIn函数

http://knockoutjs.com/examples/animatedTransitions.html 这个是官网的一个例子。

 

详细了解可以直接看官网:

http://knockoutjs.com/documentation/foreach-binding.html

 

 

二 . if ;notif

这个属性不难,但是很实用

<div data-bind="if: kk ">Here is a message. Astonishing.</div>

if: kk (kk 为true 则显示,为false则不显示)

这个就是更加kk这个的值来判断这个dom是否显示。

 

例子:

<ul data-bind="foreach: planets">

    <li>

        Planet: <b data-bind="text: name"> </b>

        <div data-bind="if: capital">

            Capital: <b data-bind="text: capital.cityName"> </b>

        </div>

    </li>

</ul>

<script>

    ko.applyBindings({

        planets: [

            { name: 'Mercury', capital: null },

            { name: 'Earth', capital: { cityName: 'Barnsley' } }       

        ]

    });

</script>

 

一个很简化的用法:

<ul>

    <li>This item always appears</li>

    <!-- ko if: true -->

        <li>I want to make this item present/absent dynamically</li>

    <!-- /ko -->

</ul>

 

<!-- ko if: true -->显示下面li中的内容,这个如果改为<!-- ko if: false -->就不显示下面这个li中的内容

 

notif属性和if是完全相反的,引用一个参数结合使用:

<ul>

    <li>This item always appears</li>

    <!-- ko if: true -->

        <li>我显示下面的就不显示</li>

    <!-- /ko -->

    <!-- ko notif: true -->

        <li>我显示上面的就不显示</li>

    <!-- /ko -->

</ul>

这样能省掉很多代码

 

三. with 定位作用

例子:

<h1 data-bind="text: city"> </h1>

<p data-bind="with: coords">

    Latitude: <span data-bind="text: latitude"> </span>,

    Longitude: <span data-bind="text: longitude"> </span>

</p>

<script type="text/javascript">

    ko.applyBindings({

        city: "London",

        coords: {

            latitude:  51.5001524,

            longitude: -0.1262362

        }

    });

</script>

 

with定位到coords对象上面,下面绑定的就是coords的内容

 

内容引用:http://hi.baidu.com/tang_guangyao/item/76c7dfa6b8cd39d715329bb1

其他内容请见Knockout.js 官网

 

 

 

 

你可能感兴趣的:(knockout)