(更新)knockout.js学习——1.1例子——绑定的详细语法

本文通过实例展示了Knockout.js中的多种数据绑定方法,包括text、visible、html、style等绑定方式,以及如何使用ko.dependentObservable进行属性监控。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

例子:

关于text、visible、html、style的绑定


eg1:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/knockout-3.1.0.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
    <h2>today message:</h2> 
    <p data-bind="text: chosenMeal(),visible:chosenMeal().length>0"></p>
    <p>价格:<span data-bind="text: pricerate"></span></p>


</body>
<script>
    // 1、声明数据    
    var viewModel = {
        chosenMeal: ko.observable("hi"),
        price: ko.observable(110)
    };

// 在ko.dependentObservable中已经指出了price()来源于viewmodel(第二个参数),指出了这个函数返回的就是price()的比较值大小。因此在html绑定中只需要写:text:pricerate。不能写成:pricerate(price()),这样写是没有根据的,并没有在pricerate函数中指出有参数。

//在使用ko.dependentObservable时,第二个参数指出了作用域范围是viewmodel中的属性或内容。在viemodel中不写这个函数的原因是:viemodel不能在内部进行自身引用。
    viewModel.pricerate = ko.dependentObservable(function () {
        return this.price() > 50 ? "expensive" : "cheap";
    }, viewModel);
    ko.applyBindings(viewModel);


</script>
</html>



改进例子2:

<html>

<head>

<title></title>

<style>

.addClass{font-size:20px;}

</style>

</head>

<body>

1、text,value,visible绑定:
    <h2>today message,字符长度不超过6个显示:</h2> 
    <input type="text" data-bind="value:chosenMeal" />

<!--在text中绑定value值时,写的是chosenMeal。但是在span等元素中绑定text值时,写的是chosenMeal(),观测值是函数,应加上括号。text中不带括号原因不清楚。-->
    <p><span data-bind="text: chosenMeal(),visible:chosenMeal().length<6"></span></p>
    <p>价格输入,50分以下价格便宜:<input type="text" data-bind="value:price" /></p>

<!--两种方式进行价格判断,一种是用函数方式用ko.dependentObservable依赖监控属性的方式,一种是在html中直接判断-->

    <p>价格1:<span data-bind="text: pricerate"></span></p>
    <p>价格2:<span data-bind="text:price()>50 ? 'e':'c'"></span></p>

<h2>today message,字符长度不超过6个显示:</h2> 

2、html绑定
 <p>显示html代码标签后的效果:<span data-bind="html:htmlnode()"></span></p>

3、style绑定、css绑定:(javascript对象文字加上引号),对于font-weight这样的形式写成fontWeight
    <p data-bind="css: { 'addClass': isclass }, style: { fontWeight: blacknot ,color:fontcolor}">是否增加class</p>


 4、attr绑定
    <a data-bind="attr: { href: ahref,title:atitle}">链接的绑定</a>


</body>
<script>
    // 1、声明数据    

 var number = [1, 0];

 var fontcolorlist =['red','black','blue'];
    var viewModel = {
        chosenMeal: ko.observable("abcde"),
        price: ko.observable("100"),

        htmlnode: ko.observable("<i>斜体</i>"),

        isclass:ko.observable(number[0]),

        blacknot: ko.observable("bold"),
        fontcolor: ko.observable(fontcolorlist[2]),
        ahref: ko.observable(""),   // 写一个http地址
        atitle:ko.observable("baidu")
    };
    viewModel.pricerate = ko.dependentObservable(function () {
        return this.price() > 50 ? "expensive" : "cheap";
    }, viewModel);
    ko.applyBindings(viewModel);
</script>

</html>


总结:

html绑定:data-bind="html:'<i>code</i>' "     // html绑定是把带有标签形式的html按标签进行转换,如带斜体标签的html以斜体字显示

css绑定:data-bind="css:{'className':addOrDel}"         // css绑定是增加或去掉一个css类

style绑定:data-bind="style:{color:' ',fontSize:' '}"

内容概要:该论文探讨了一种基于粒子群优化(PSO)的STAR-RIS辅助NOMA无线通信网络优化方法。STAR-RIS作为一种新型可重构智能表面,能同时反射和传输信号,与传统仅能反射的RIS不同。结合NOMA技术,STAR-RIS可以提升覆盖范围、用户容量和频谱效率。针对STAR-RIS元素众多导致获取完整信道状态信息(CSI)开销大的问题,作者提出一种在不依赖完整CSI的情况下,联合优化功率分配、基站波束成形以及STAR-RIS的传输和反射波束成形向量的方法,以最大化总可实现速率并确保每个用户的最低速率要求。仿真结果显示,该方案优于STAR-RIS辅助的OMA系统。 适合人群:具备一定无线通信理论基础、对智能反射面技术和非正交多址接入技术感兴趣的科研人员和工程师。 使用场景及目标:①适用于希望深入了解STAR-RIS与NOMA结合的研究者;②为解决无线通信中频谱资源紧张、提高系统性能提供新的思路和技术手段;③帮助理解PSO算法在无线通信优化问题中的应用。 其他说明:文中提供了详细的Python代码实现,涵盖系统参数设置、信道建模、速率计算、目标函数定义、约束条件设定、主优化函数设计及结果可视化等环节,便于读者理解和复现实验结果。此外,文章还对比了PSO与其他优化算法(如DDPG)的区别,强调了PSO在不需要显式CSI估计方面的优势。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值