search

Narutocc / knockout

0 stars 0 forks source link

knockout 实现手风琴效果 #5

Open Narutocc opened 6 years ago

Narutocc commented 6 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
    <!-- ko foreach:{data:website,as:'$website'}-->
    <div class="panel panel-default">
        <div class="panel-heading" style="position:relative;" data-bind="click:$root.showInfo">
            <i class="fa fa-caret-right" aria-hidden="true" style="position:absolute;" data-bind="style:{display:$website.isShowInfo() ? 'none':'block'}"></i>
            <i class="fa fa-caret-down" aria-hidden="true" style="position:absolute;" data-bind="style:{display:$website.isShowInfo() ? 'block':'none'}"></i>
            <h3 class="panel-title" data-bind="text:$website.title" style="padding-left: 12px;"></h3>
        </div>
        <div data-bind="if:$website.isShowInfo">
            <div class="panel-body" data-bind="text:$website.info"></div>
        </div>
    </div>
    <!-- /ko -->
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/knockout/3.4.2/knockout-min.js"></script>
<script>
    function viewModel(){
        var self = this;
        this.website = ko.observableArray([{
            title:'Knockout',
            info:'Knockout是一个JavaScript库，可帮助您使用干净的底层数据模型创建丰富，响应式的显示和编辑器用户界面。'
        },{
            title:'iOS',
            info:'iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。'
        },{
            title:'jmeter',
            info:'jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。'
        },{
            title:'ejb',
            info:'Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。'
        }])

        $.each(self.website(),function(n,v){
            v.isShowInfo = ko.observable(false);
        })

        this.showInfo = function(data){
            var currentData = data;
            if(currentData.isShowInfo())
                currentData.isShowInfo(false)
            else
                currentData.isShowInfo(true)
        }
    }
    ko.applyBindings(new viewModel())
</script>
</html>

<!-- 原理：给每个数据加上一个双向绑定的属性，用于判断是否显示该数据 -->

页面效果如下： qq 20171213113441

knockout中事件可以不绑定数据，直接在js中事件的第一个参数即是当前点击的数据

<div data-bind="click:showInfo.bind($data)"></div>
js:
...
this.showInfo = function(data){console.log(data)}

可以简写为：

<div data-bind="click:showInfo"></div>
js:
...
this.showInfo = function(data){console.log(data)}