knockout.js如何在开发中正确的使用。

Knockout.js是什么?

Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护。

  1. 笔者在最近开发项目需要兼容ie8的这个框架是同事提出来的,它本身不赖任何库,它兼容ie所有版本。配合着jquery开发会让项目开发的更有效率。为大家整理了以下代码方便大家查阅。如果你开发得项目不是特别的大用笔者分享的就可以完成了。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knockout.js如何使用</title>
    <!-- knockout 如何使用 正确排除开发遇见的问题 -->
    <style>
        .Hide{
            color: red;
        }
        .Show{
            color: green;
        }
    </style>
</head>

<body>
    <div id="main">
        循环对象:<ol data-bind="foreach:arrObject"><li data-bind="text:name"></li></ol>
        循环数组:<ul data-bind="foreach:arrArray"><li><span data-bind="text:$data"></span>----<i data-bind="text:$parent.moduleId"></i></li></ul>
        双向绑定:<span data-bind="text:moduleId"></span>
        <input data-bind="value:moduleId" /><br />
        下拉框:<select data-bind="options:selectUp,optionsText:'name',optionsValue:'id',value:selectUpId,optionsCaption: '----全部----'"></select><br />
        下拉框选中Id:<span data-bind="text:selectUpId"></span><br />
        if判断:<span data-bind="if:ifType">if==true</span><br />
        计算属性:<span data-bind="text:fullName"></span><br />
        Visible绑定:<span data-bind="visible: shouldShowMessage">Visible==true</span><br />
        class绑定:<span data-bind="css: { Hide: currentProfitClass() > 0,Show:currentProfitClass() < 0 }">class绑定变为红色</span><br/>
        style绑定:<span data-bind="style: { color: currentProfitStyle() > 0?'red':'green' }">style绑定变为红色</span><br/>
        attr绑定:<a data-bind="attr: {href:pathUrl},css: { Hide: currentProfitClass() > 0,Show:currentProfitClass() < 0 }">a链接动态添加href</a><br/>
        <div>
            <input type=checkbox data-bind="checked:IsAll"/>全选
            <ul data-bind="foreach: report"><li><input type="checkbox" data-bind="checked: checks" /><span data-bind="text: name"></span></li></ul>
        </div>
        普通点击事件:<button data-bind="click:incrementClickCounter">按钮</button><br/>
        循环普通点击事件:<ul data-bind="foreach:selectUp"><button data-bind="text:'点击按钮'+($index()+1),event:{click:$parent.selectUpClick}"></button></ul>
        传参点击事件:<button data-bind="click:incrementClickCounterParams.bind($data,2)">按钮</button><br/>
        循环传参点击事件:<ul data-bind="foreach:selectUp"><button data-bind="text:'点击按钮'+($index()+1),event:{click:$parent.selectUpParamsClick.bind($data,name)}"></button></ul>
    </div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> -->
<script>
    var PagedGridModel = function () {
        var _self=this;
        // 循环对象
        this.arrObject = ko.observableArray([{
            name: '张三',
            id: 10
        }, {
            name: '李四',
            id: 20
        }, {
            name: '王五',
            id: 40
        }]);
        //  *注 $parent 在循环中使用 获取父级元素
        // 循环数组
        this.arrArray = ko.observableArray([1, 2, 3, 4]);
        // select 下拉框    /**  注:写下拉框的时候一定不要使用foreach属性,虽然可以实现,但在ie低**/
                            /**版本中会出现下拉框倒序问题。是可以解决的,需要消耗性能,尽量不要用foreach 求解决方法的小伙伴去评论吧~~**/
        this.selectUp = ko.observableArray([{
            name: '张三1',
            id: 1
        }, {
            name: '张三2',
            id: 2
        }, {
            name: '张三3',
            id: 3
        }]);
        this.selectUpId = ko.observable(2);
        // 双向绑定
        this.moduleId = ko.observable(100);
        //  if
        this.ifType = ko.observable(true);
        //  计算属性 实时更新
        self.firstName = ko.observable('Bob');
        self.lastName = ko.observable('Smith');
        this.fullName = ko.computed(function () {
            return this.firstName() + " " + this.lastName();
        })
        // Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 与if区别 if不会去渲染出dom visible只是display:none
        this.shouldShowMessage = ko.observable(true);
        // css class 绑定
        this.currentProfitClass=ko.observable(-1);
        // style 绑定
        this.currentProfitStyle=ko.observable(100);
        // attr属性绑定
        this.pathUrl=ko.observable('https://blog.csdn.net/momoomom');
        // 全选/全不选
        this.report=ko.observableArray([{checks:false,name:'选择1',key:1},{checks:false,name:'选择2',key:2},{checks:false,name:'选择3',key:3}]);
        this.IsAll=ko.observable(false);
        this.IsAll.subscribe(function (nvalue) {
            if (nvalue) {                
                var s = _self.report();
                _self.report([]);
                for (var i = 0; i < s.length; i++) {
                    s[i].checks = true;                
                }
                _self.report(s);
            } else{
                var s = _self.report();
                _self.report([]);
                for (var i = 0; i < s.length; i++) {
                    s[i].checks = false;               
                }
                _self.report(s);
            }
        });
        this.incrementClickCounter=function(){
           console.log('我只是点击事件')
        };
        this.selectUpClick=function(row,e){
           console.log('我是循环点击事件',row,e,this)
        };
        this.incrementClickCounterParams=function(...args){
            console.log(args)
        };
        this.selectUpParamsClick=function(...args){
            console.log(args)
        }
    }
    ko.applyBindings(new PagedGridModel(), document.getElementById('main'));
</script>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Knockout.js 是一个基于 MVVM 架构的 JavaScript 框架,它可以帮助我们实现数据绑定、模板渲染、事件绑定等功能。要显示上传文件的进度,我们可以使用 XMLHttpRequest 对象来发送文件,并使用 Knockout.js 来更新进度条的值。 首先,我们需要定义一个 ViewModel,用来绑定页面上的元素和数据: ``` function ViewModel() { var self = this; self.uploadProgress = ko.observable(0); self.uploadFile = function() { var fileInput = document.getElementById("fileInput"); var file = fileInput.files[0]; var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(event) { if (event.lengthComputable) { var percentComplete = event.loaded / event.total * 100; self.uploadProgress(percentComplete); } }, false); xhr.open("POST", "/upload"); xhr.send(file); }; } ko.applyBindings(new ViewModel()); ``` 在这个 ViewModel ,我们定义了一个 uploadProgress 可观察的属性,它用来绑定页面上的进度条。我们还定义了一个 uploadFile 方法,用来上传文件。在上传文件的过程,我们使用 XMLHttpRequest 的 upload 事件来监听文件上传的进度,如果进度发生变化,我们就更新 uploadProgress 的值,从而更新页面上的进度条。 在 HTML 代码,我们可以使用 Knockout.js 的数据绑定语法来绑定 uploadProgress 属性,以显示进度条: ``` <input type="file" id="fileInput"> <button data-bind="click: uploadFile">Upload File</button> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }"> <span data-bind="text: uploadProgress() + '%'"></span> </div> </div> ``` 在这个 HTML 代码,我们使用了 Bootstrap 的进度条样式,并使用Knockout.js 的数据绑定语法来绑定 uploadProgress 属性。当 uploadProgress 的值发生变化时,进度条的宽度和文本也会相应地更新。 总结一下,要显示上传文件的进度,我们可以使用 XMLHttpRequest 对象来发送文件,并使用 Knockout.js 来更新进度条的值。我们可以定义一个 ViewModel,用来绑定页面上的元素和数据,定义一个 uploadFile 方法,用来上传文件,使用 XMLHttpRequest 的 upload 事件来监听文件上传的进度,如果进度发生变化,就更新 uploadProgress 的值,从而更新页面上的进度条。在 HTML 代码,我们可以使用 Knockout.js 的数据绑定语法来绑定 uploadProgress 属性,以显示进度条。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旭阳的头发呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值