ITPub博客

首页 > IT职业 > IT生活 > knockout js 学习系列(二)

knockout js 学习系列(二)

IT生活 作者:jmctian 时间:2021-09-09 08:57:03 0 删除 编辑
前言

话不多说,继续官网的Tutorial,第二站:Working with Lists and Collections.

Very often, you'll want to generate repeating blocks of UI elements, especially when displaying lists where the user can add and remove elements. Knockout lets you do that easily, using observable arrays and the foreach binding.

官方如是说,当你想动态的增加或删除列表上的行的时候,使用ko的observable arrays可以很方便的帮你实现。

Getting started

直接上代码吧,实现一个简单的将数组以table的形式显示。

Your seat reservations

<!-- 使用foreach来绑定数组到table上 --> <!-- 绑定对象的各个属性 -->
Passenger Name Meal Surcharge

上述代码实现了最基本的数组绑定table。
接下来展示双向绑定数组的时候到了。。。。
结合上Introduction中的demo,把上面的代码做一些调整

    <!-- 在html增加这个table ,用以动态增加seats-->
    
name:
<!-- 在js中增加以下代码,以实现动态增加seats中的值 -->

可以发现,动态向seats数组中增加元素后,table的行自动增加了。

接下来,使表格可编辑

    

            
                
            

接下来实现动态移除table上的seat

<!-- 在tr里面加上一列 -->
remove

就实现了点击remove按钮移除该行的事件。

最后,再为这个表格增加一个汇总目前座位数和总金额的功能,当总金额大于0时才显示出来
同时规定座位数最多只能有5个(也就是等于5之后,不能再add)

    <!-- 在表格上方增加以下代码 -->
    

Your seat reservations()

total price is $

<!-- 修改add按钮,增加enable -->

这样就能实现动态计算总金额的功能了。

好了,简单的list绑定就结束了。
老样子,源代码

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2963/viewspace-2798046/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-13

  • 博文量
    0
  • 访问量
    429