KnockoutJS-绑定元素

　　工作变更，又走回了WPF，一个来月没有接触web开发了，之前的KnockoutJS却不想放弃，继续进行知识的巩固，下个月开始重新走回web开发之路，还是得用回一些习惯了的工具。本次开始接触各绑定元素功能、用法，这些绑定方式是在使用ko过程中用的最多的。

 

绑定元素在KnockoutJS中可以分为三大类

　　1、文本控制与显示隐藏

　　2、流程控制

　　3、配合表单使用

 

从个人使用过程中应用程度进行排序展示：

1、value：在DOM元素与viewModel对象的属性间建立桥梁，用户编辑控件时viewModel中对应属性值将自动更新，同样在更新了对应属性后，用户控件展示数据也将自动更新。常用于input、select、textarea等控件；

2、text：绑定到DOM元素上，将viewModel对象的属性的值展示在绑定元素上。常用于p、pre、label、span、th、td等控件使用；

3、click：绑定到DOM元素上添加事件句柄，当点击事件被触发时，执行我们定义好的JS函数。常用于button、input、a等控件使用。

　　click说明：在绑定函数时，可以指定任意函数，即在viewModel中声明的函数和在viewModel之外声明的函数都可被调用，同时在调用viewModel之内的函数时可以直接写函数名，而无需带上viewModel对象名。

4、visible:绑定到DOM元素上，该元素的隐藏或显示将有viewModel的属性状态、函数返回值或表达式来决定。

针对前四个绑定元素，简单演示一下功能：

Html:

<div>
    <label>公司名称</label>
    <input type="text" data-bind="value:unitName" /><br />
    <label>公司地址</label>
    <input type="text" data-bind="value:address" /><br />
    <p data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></p>
    <pre data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></pre>
    <label data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></label><br />
    <span data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></span><br />
    <table>
        <tr>
            <th data-bind="text:unitName"></th>
        </tr>
        <tr>
            <td data-bind="text:address"></td>
        </tr>
    </table>
    <div data-bind="visible:visibleButton">
        <button data-bind="click: updateUnitName">修改公司名称为中部星城科技</button><br />
        <button data-bind="click: updateAddress">修改公司地址为湖南长沙雨花区</button>
    </div>
    <div>
        <button data-bind="click:function(){viewModel.visibleButton(false);}">隐藏上面两个按钮</button>
    </div>
</div>

JS代码:

<script type="text/javascript">
    var viewModel = {
        //value、text
        unitName: ko.observable(""),
        address: ko.observable(""),

        //click
        //viewModel内JS函数
        updateAddress: function () {
            this.address("湖南长沙雨花区");
        },

        //visible
        visibleButton: ko.observable(true),
    };

    //任意JS函数
    function updateUnitName() {
        viewModel.unitName("中部星城科技");
    }

    $(function () {
        ko.applyBindings(viewModel);//完成绑定
    });
</script>

 动画效果图：

 

5、options：该绑定元素只用于在select中使用，通过关联viewModel中提供的数组，使得select控件能够展示出数组中的所有项。

　　options，用于绑定下拉列表中各项（可选参数-optionsCaption，在默认情形下不想选择任何一个option项时，给予提示语，诸如“---请选择---”、或“---------”之类的，作为默认选项，该项的值为undefined）。

　　optionsText,用于确定下拉列表中每一项的指定属性作为展示列，并可以在此基础上进行扩展，将指定属性传入函数中加工返回新的展示信息，。

　　optionsValue,用于确定下拉列表中每一项的指定属性作为标识列。

6、checked：绑定到type为checkbox的input控件上，关联viewModel的属性状态，相互间的变动都会使得双方更新状态，状态有选中和未选中。仅用于input控件指定类型为checkbox时使用。

7、css：将一个或多个class动态绑定到DOM元素上，根据具体业务变更绑定的class。常用于class之间大范围样式的切换，通过设计JS函数完成指定class是否启用。注意：在设计class时如果存在不合法的命名下，如my-class需转换为‘my-class’。

8、style：作用效果小于css，将一个或多个style的值绑定到DOM元素上，常用于单个或少数量style变更时使用。

9、attr：更改DOM元素的任何属性值，关联viewModel上对应的attr属性值，便于动态更改展示。注意：在取属性名称时如果存在不合法的命名下，如data-something需转换为'data-something'。

针对该五个绑定元素，简单演示一下功能：

Html:

<div style="margin-top:50px;">
    <style type="text/css">
        .testClass {
            background-color: #ffd800;
            font-size: 16px;
        }
    </style>
    <label>公司类型：</label>
    <select data-bind="options:unitTypeOptions, optionsCaption:'---请选择公司类型---',optionsText: 'text', optionsValue: 'value', value:choiceUnitTypeValue"></select><br />
    <input type="checkbox" data-bind="checked:visibleLabel" /><label data-bind="css: { testClass: visibleLabel}">启用展示</label>
    <label data-bind="text:'选中值：'+choiceUnitTypeValue(),visible:visibleLabel"></label><br />
    <a data-bind="attr: { title: tips},style:{'background-color':visibleLabel()?'red':'white'}">公司官网</a>
    <button data-bind="click:function(){viewModel.tips('knockoutJS');}">切换a标签提示信息</button>
</div>

JS代码:

<script type="text/javascript">
    var viewModel = {
        //value、text
        unitName: ko.observable(""),
        address: ko.observable(""),

        //click
        //viewModel内JS函数
        updateAddress: function () {
            this.address("湖南长沙雨花区");
        },

        //visible
        visibleButton: ko.observable(true),

        //options
        unitTypeOptions: ko.observableArray([
            { text: "有限公司", value: "1" },
            { text: "有限责任公司", value: "2" },
            { text: "国有独资公司", value: "3" },
            { text: "股份有限公司", value: "4" }
        ]),
        choiceUnitTypeValue: ko.observable(),

        //checked
        visibleLabel: ko.observable(true),

        //attr
        tips: ko.observable("hello"),
    };

    //任意JS函数
    function updateUnitName() {
        viewModel.unitName("中部星城科技");
    }

    $(function () {
        ko.applyBindings(viewModel);//完成绑定
    });
</script>

动画效果图：

 

10、html：绑定到DOM元素上，并将viewModel的属性值作为展示，与text用法相同，但不同处在于，html可以将内容中存在的html标记渲染为真实的html内容。(个人建议少用或不用)

11、event：为DOM元素的事件添加指定的事件句柄，事件被触发时执行我们定义好的逻辑。常用在keypress、mouseover、mouseout事件上。与click用法一样，可以设置为任意的js函数。

12、submit：绑定在表单上用于提交时拦截默认表单提交动作，执行我们定义好的逻辑，然后真正执行提交操作,该提交表单操作可以是原有form表单提交，也可以是我们设计的表单提交，通过参数设置。仅用于form控件。

13、enable：绑定DOM元素自身的启用禁用状态，关联viewModel的属性状态，来控制该DOM元素的启用。常用于input、select、textarea等控件中。

14、disable：与enable功能相同，使用方式相反，当disable为true时将被禁用。常用于input、select、textarea等控件中。

15、selectedOptions：在multi-select列表中,选择一个或多个项，并将选中的项加入到selectedOptions关联的viewModel的属性数组中。常用于多选项选择。

针对该六个绑定元素，简单演示一下功能：

Html:

<div style="margin-top:50px;">
    <label>html元素所绑定的内容为：</label>
    <label data-bind="html:htmlContent"></label><br />
    <div data-bind="event:{mouseover:buttonKeyPress}">
        鼠标移入改变html元素绑定内容
    </div>
    <hr />
    <form action="@Url.Action("CreateUser")" method="post" data-bind="submit:submitForm">
        <label>用户名：</label>
        <input type="text" name="userName" data-bind="enable:userNameEnable" />
        <label>密码：</label>
        <input type="text" name="password" data-bind="disable:passwordDisable" />
        <input type="submit" value="增加" />
    </form><br />
    <button data-bind="click:function(){viewModel.userNameEnable(true);}">启用用户名输入</button>
    <button style="margin-left:10px;" data-bind="click:function(){viewModel.passwordDisable(false);}">启用密码输入</button><br />
    <hr />
    <p>
        <select data-bind="options: companyOptions,selectedOptions: chosenCompanies" size="5" multiple="true"></select>
        <select data-bind="options: chosenCompanies," size="5"></select>
    </p>
</div>

JS代码：

<script type="text/javascript">
    var viewModel = {
          
        //html
        htmlContent: ko.observable("<a href='#'>百度一下</a>"),

        //event
        buttonKeyPress: function () {
            this.htmlContent("keyPress事件被触发！");
        },

        //submit
        submitForm: function (formElement) {
            //执行逻辑
            //执行表单提交
            //或返回到默认表单提交return true
            return true;
        },

        //enable
        userNameEnable: ko.observable(false),

        //disable
        passwordDisable: ko.observable(true),

        //selectedOptions
        companyOptions: ko.observableArray(['百度', '阿里', '腾讯']),
        chosenCompanies: ko.observableArray(['百度'])
    };

    //任意JS函数
    function updateUnitName() {
        viewModel.unitName("中部星城科技");
    }

    $(function () {
        ko.applyBindings(viewModel);//完成绑定
    });
</script>

动画效果图：

16、uniqueName：绑定DOM元素有一个非空的name属性，在没有设置name属性下，会绑定上一个而唯一的name属性。(使用场景太少，个人还没有使用过)

 

0、foreach: 绑定到DOM元素上，将关联的viewModel中指定集合或数组循环输出，并动态更改html代码。配合table、div等控件使用。(个人最喜欢的绑定元素，强大的存在)

Html：

<table class="table table-bordered" style="margin-top:5px;">
    <thead>
        <tr>
            <th>公司名称</th>
            <th>公司地址</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach:unitList">
        <tr>
            <td><input type="text" data-bind="value:unitName" /></td>
            <td><input type="text" data-bind="value:address" /></td>
            <td><button class="btn btn-danger" data-bind="click:$root.removeUnitInfo">删除</button></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                <button type="button" class="btn btn-primary" data-bind="click:addUnitInfo">增加</button>
            </td>
        </tr>
    </tfoot>
</table>
<div>
    <label>现有公司信息列表:</label>
    <div data-bind="foreach:unitList">
        <label data-bind="text:'公司名称:'+unitName()+'.公司地址:'+address()+'.'"></label><br />
    </div>
</div>

JS代码：

<script type="text/javascript">
    function unitViewModel(name, addressInfo) {
        unitName = ko.observable(name);
        address = ko.observable(addressInfo);
    }

    var viewModel = {
        unitList: ko.observableArray(),

        addUnitInfo: function () {
            viewModel.unitList.push(new unitViewModel("", ""));
        },
        removeUnitInfo: function (unit) {
            viewModel.unitList.remove(unit);
        },
    };

    $(function () {
        ko.applyBindings(viewModel);//完成绑定
        viewModel.unitList.push(new unitViewModel("星城科技", "湖南-长沙"));
        viewModel.unitList.push(new unitViewModel("星城集团", "湖南-长沙"));
        viewModel.unitList.push(new unitViewModel("中车集团", "湖南-株洲"));
    });
</script>

动画效果图：

　本次对于所有绑定元素进行了简单的功能讲解和操作，后期将会综合运用这些完成一些功能。

　代码地址：https://gitee.com/530521314/Partner.TreasureChest.git

 

2018-08-26,望技术有成后能回来看见自己的脚步