ko.html ko初体验

最新推荐文章于 2022-06-16 15:02:22 发布

学无止境慢慢来

最新推荐文章于 2022-06-16 15:02:22 发布

阅读量312

点赞数

分类专栏： ko

ko 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ko</title>

    <script src="js/knockout-3.4.2.js"></script>
</head>

<body>
    <div id="one">
        Price: <input type="text" data-bind="value: price" placeholder="请输入单价" /><br>
        count: <input type="text" data-bind="value: count" placeholder="请输入数量" /><br>
        sum: <span data-bind="text: sum"></span>
    </div>

    <script>
        var ViewModel = function(p, c) {
            // 设置为可观察对象并以参数p、c初始化
            this.price = ko.observable(p);
            this.count = ko.observable(c);
            // 调用ko函数的时候将this传入，
            // 否则执行ko.pureComputed内部代码时，this为ko，ko.price()报错。
            this.sum = ko.pureComputed(function() {
                // 因为可观察对象是一个函数对象，所以要用price()来读取当前值。
                // 设置值使用price(NewValue)，支持链式写法：this.price(12).count(3)
                return this.price() * this.count();
            }, this);
        };
        var vm = new ViewModel(135, 10);
        // 应用该绑定，绑定开始生效
        ko.applyBindings(vm);
    </script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ko.html ko初体验

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
复制链接

扫一扫

专栏目录