1、数据绑定的方式
一般的数据绑定有三种:One-Time,One-Way,Two-way。
One-Time绑定模式:从viewModel绑定至UI这一层只进行一次绑定,程序不会继续追踪数据的在两者中任何一方的变化,这种绑定方式适用于数据仅仅会加载一次的情况。
One-Way绑定模式:单向绑定,即object-UI的绑定,只有当viewModel中数据发生了变化,UI中的数据也将会随之发生变化,反之不然。
Two-Way绑定模式:双向绑定,无论数据在Object或者是UI中发生变化,应用程序将会更新另一方,这是最为灵活的绑定方式,同时代价也是最大的。
2、knockoutJS的双向绑定
①通过 ko.observable("值")进行绑定
②加上了 ko.observable,则属性就变成了方法,赋值就需要使用方法形式。例如:‘string_label‘:ko.observable(‘给label标签赋值文本‘)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="knockout/knockout-3.5.1.js"></script> <!-- <script src="https://knockoutjs.com/downloads/knockout-3.5.1.js"></script> --> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <h3 class="text-center text-success">debug page</h3> <label data-bind="text:string_label"></label> <p data-bind="text:string_p"></p> <input type="text" data-bind="value:string_input"> <p><b>注意:</b>input标签的文本需要使用textinput,其他标签用text即可</p> <p>---------------------------------------------------------------------------------------</p> <p>双向绑定的证明实验</p> <input id="prove" size="30" type="text" placeholder="输入后点击按钮,看其他标签的变化"> <button id="btn">点击</button> </body> <script> var myViewModel = { ‘string_label‘: ko.observable(‘给label标签赋值文本‘), ‘string_p‘: ko.observable(‘给p标签赋值文本‘), ‘string_input‘: ko.observable(‘给input标签赋值文本‘) }; ko.applyBindings(myViewModel); $(function () { $(‘#btn‘).click(function () { myViewModel.string_label($(‘#prove‘).val()) myViewModel.string_p($(‘#prove‘).val()) myViewModel.string_input($(‘#prove‘).val()) }) }) </script> </html>
不点击按钮前
输入字符串并 点击按钮后
参考链接: https://www.cnblogs.com/4littleProgrammer/p/4811597.html