KnockoutJs dynamic Binding

2551 단어 bindingMVVMKnockoutJS
KnockoutJs는 동적 귀속을 편리하게 실현할 수 있습니다. 이런 귀속은 양방향입니다. 즉, DOM 데이터 원본에 대한 수정이 바로 DOM에 반영됩니다.KnockoutJs는 MVVM 모드의 실천자입니다.예는 다음과 같습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>knockout demo</title>
    <script src="script/jquery-1.11.0.min.js"></script>
    <script src="script/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var index = 1;

            $("#btnAdd").bind("click", function () {

                var item = {
                    Id: index + 1,
                    RequestType: "ResourceRequest",
                    RequestName: "VirtualMachine"
                };

                options.records.unshift(item);
                viewModelInstance.records(options.records);
                index++;

            });

            var options = {
                records: [
                    {
                        Id: "1",
                        RequestType: "BaseType", 
                        RequestName: "BaseName"
                    }
                ]
            };

            function viewModel(option) {
                this.records = ko.observableArray(option.records);
            };

            var viewModelInstance = new viewModel(options);
            ko.applyBindings(viewModelInstance);
        });
    </script>
</head>
<body>
    <table border="1px">
        <thead>
            <tr>
                <th><a>Id</a></th>
                <th><a>RequestType</a></th>
                <th><a>RequestName</a></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: records">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: RequestType"></td>
                <td data-bind="text: RequestName"></td>
            </tr>
        </tbody>
    </table>
    <br/>
    <input id="btnAdd" type="button" value="add" />
</body>
</html>
효과:
add 단추를 누르면 데이터가 데이터 원본에 추가됩니다. 목록이 자동으로 한 줄 추가됩니다. 정말 편리합니다!

좋은 웹페이지 즐겨찾기