KnockoutJS的基础用法

相关文章推荐

强健的大葱 · 如何使用pandas DataFrame ...· 3 月前 ·

坏坏的麦片 · hutool的BeanUtil可以复制集合吗 ...· 11 月前 ·

健壮的芹菜 · matlab ...· 1 年前 ·

刚分手的皮蛋 · 采样提速256倍，蒸馏扩散模型生成图像质量媲 ...· 2 年前 ·

成熟的柠檬 · sql server error 4060 ...· 2 年前 ·

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

        var myViewModel = {
            Name: "Lilei",
            profession: "软件工程师",
        };

    <div> 
        姓名：<label data-bind="text:Name"></label><br />
        职业：<input type="text" data-bind="textinput:Profession" />
    </div>

ko.applyBindings(myViewModel);

    <div> 
        姓名：<label id="lb_name" data-bind="text:Name"></label><br />
        职业：<input type="text" data-bind="textinput:Profession" />
    </div>

ko.applyBindings(myViewModel,document.getElementById("lb_name"));

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index3</title>
    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
        姓名：<label data-bind="text:Name"></label><br />
        职业：<input type="text" data-bind="textinput:Profession" />
        <input type="text" id="txt_testobservable" />
    <script type="text/javascript">
        //1.定义ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: "软件工程师",
        //2.激活绑定
        ko.applyBindings(myViewModel);
        $(function () {
            //注册文本框的textchange事件
            $("#txt_testobservable").on("input", function () {
                myViewModel.Name($(this).val());
    </script>
</body>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index3</title>
    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
        姓名：<input type="text" data-bind="textinput:Name" /><br />
        职业：<input type="text" data-bind="textinput:Profession" /><br />
        描述：<label data-bind="text:Des"></label>
    <script type="text/javascript">
        //1.定义ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: ko.observable("软件工程师"),
        myViewModel.Des = ko.dependentObservable(function () {
            return "本人姓名——" + myViewModel.Name() + "，职业——" + myViewModel.Profession();
        //2.激活绑定
        ko.applyBindings(myViewModel);</script>
</body>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index3</title>
    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
    <div><select data-bind="options:deptArr,
                           optionsText:'Name'"></select>
        <input type="text" id="txt_testobservable" /><input type="button" id="btn_test" value="新增部门" />
    <script type="text/javascript">
            var deptArr = ko.observableArray([
                { id: 1, Name: '研发部' },
                { id: 2, Name: '行政部' },
                { id: 3, Name: '人事部' }
            var viewModel = {
                deptArr: deptArr,
            ko.applyBindings(viewModel);
            var i=4;
            $(function () {
                $("#btn_test").on("click", function () {
                    deptArr.push({ id: i++, Name: $("#txt_testobservable").val() });
    </script>
</body>

            $(function () {
                $("#btn_test").on("click", function () {
                    deptArr[1].Name = "aaa";
            });

　　<div> 
        姓名：<label data-bind="text:Name"></label><br />
        职业：<input type="text" data-bind="textinput:Profession" />
    </div>

　　　　 //1.定义ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: "软件工程师",
        //2.激活绑定
        ko.applyBindings(myViewModel);

姓名：<input type="text" data-bind="value:Name,valueUpdate:'keyup'" /><br />

　　　　var myViewModel = {
            Name: ko.observable("Lilei"),
        };//2.激活绑定
        ko.applyBindings(myViewModel);

 　　<div>
        <input type="text" data-bind="enable:IsMen"/>
    <script type="text/javascript">
        //1.定义ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: ko.observable("软件工程师"),
            Age: ko.observable(40),
            IsMen:ko.observable(true)
        //2.激活绑定
        ko.applyBindings(myViewModel);
        myViewModel.IsMen(false);
    </script>

    <style type="text/css">
        .testbold {
        background-color:powderblue;
    </style>

<div data-bind="css:{testbold:myViewModel.Name()=='Lilei'}">aaaa</div>

        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: ko.observable("软件工程师"),
            Age:ko.observable(40)
        };

<div data-bind="css:{testbold:myViewModel.Name()=='Lilei',testborder:myViewModel.Profession()=='PHP工程师'}">aaaa</div>

<div data-bind="css:{ padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>aaaa</div>

    <div>
        <input type="button" value="测试click绑定" data-bind="click:ClickFunc" />
    </div>

 　　　　var myViewModel = {
            ClickFunc:function(){
                alert($(event.currentTarget).val());
        ko.applyBindings(myViewModel);

    <div>
        <input type="button" value="测试click绑定" data-bind="click:function(){
                alert('点击了');
    </div>

            $.ajax({
                url: "/Home/GetData",
                type: "get",
                data: {},
                success: function (data, status) {
                    var oJson = data;
            });

　　　　var myViewModelJson = {
            DeptName: ko.observable(),
            DeptLevel: ko.observable(),
            DeptDesc:ko.observable()
        ko.applyBindings(myViewModelJson);

                success: function (data, status) {
                    var oJson = data;
                    myViewModelJson.DeptName(oJson.DeptName);
                    myViewModelJson.DeptLevel(oJson.DetpLevel);
                    myViewModelJson.DeptDesc(oJson.DeptDesc);
                }

    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
    <script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>

　　　　　　　　　success: function (data, status) {
                    var myViewModelJson2 = ko.mapping.fromJS(data);
                    ko.applyBindings(myViewModelJson2);
                }

　　　　var myViewModelJson = {
            DeptName: ko.observable(),
            DeptLevel: ko.observable(),
            DeptDesc:ko.observable()
        ko.applyBindings(myViewModelJson);
        $(function () {
            $.ajax({
                url: "/Home/GetData",
                type: "get",
                data: {},
                success: function (data, status) {
                    ko.mapping.fromJS(data, myViewModelJson)
        });

　　　　 $(function () {
            var oJson1 = ko.toJS(myViewModelJson);
            var oJson2 = ko.toJSON(myViewModelJson);
        var myViewModelJson = {
            DeptName: ko.observable("研发部"),
            DeptLevel: ko.observable("2"),
            DeptDesc: ko.observable("开发一伙人")
        ko.applyBindings(myViewModelJson);

ko.bindingHandlers.MySelect = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
};

    <div> 
        <select data-bind="MySelect:$root">
            <option id="1">研发部</option>
            <option id="2">人事部</option>
            <option id="3">行政部</option>
        </select>
    </div>

ko.bindingHandlers.MySelect = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).multiselect();
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
};

    <div style="text-align:center;"> 
        <select data-bind="MySelect:$root">
            <option id="1">研发部</option>
            <option id="2">人事部</option>
            <option id="3">行政部</option>
        </select>
    </div>

$(function () {
    var MultiSelect = {};
    ko.applyBindings(MultiSelect);
});

ko.bindingHandlers.MySelect = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var oParam = valueAccessor();
        $(element).multiselect(oParam);
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
};

$(function () {
    var MultiSelect = {
        enableClickableOptGroups: true,//收起分组

javascript.shop

KnockoutJS的基础用法

一、Knockout.js简介

1、Knockout.js和MVVM

2、最简单的实例

2.1、去官网下载knockout.js文件，然后引用到view页面里面。

2.2、定义ViewModel

2.3、view视图里面定义绑定data-bind的标签

2.4、激活绑定

3、监控属性

3.1、Observables：监控属性

3.2、DependentObservables：监控依赖属性

3.3、ObservableArray；监控数组

4、ko里面常见的data-bind属性

4.1、text和inputText

4.2、value

4.3、checked

4.4、enable

4.5、disabled

4.6、options

4.7、html

4.8、css

4.9、style

4.10、attr

4.11、click

4.12、其他

5、Json对象和监控属性的转化及关系

5.1、JSON对象转换成ViewModel

5.2、ViewModel转换成JSON对象

6、创建自己的data-bind属性

6.1、最简单的MutiSelect

6.2、参数传递