範例7很簡單,示範如何透過屬性控制HTML元素顯示與否(visible)、可以操作與否(disable),以及依屬性決定是否加上特定CSS class

線上展示

最前方的Checkbox,勾選後TextBox會設為disabled,後方會出現一個內含"完成!"文字的<span>,若輸入文字出現"急"字,則TextBox會再加上urgent CSS Class。關鍵在於TextBox及Span的data-bind設定:

<input type="text" style="width: 200px;" 
data-bind="disable: done, value: task, css: { urgent: task().indexOf('急') > -1 }" />    <span data-bind="visible: done">完成!</span>

完整程式碼如下,很單純,就不多做解釋了:

<!DOCTYPE html>
<html>
<head>
    <title>Lab 7 - visible, disable, css與屬性連動</title>
    <script src="../Scripts/jquery-1.7.2.js"></script>
    <script src="../Scripts/knockout-2.1.0.debug.js"></script>
    <script>
        function MyViewModel() {
            var self = this;
            self.done = ko.observable(false);
            self.task = ko.observable("寫家庭作業");
        }
 
        $(function () {
            ko.applyBindings(new MyViewModel());
        });
    </script>
    <style>
        .urgent
        {
            background-color: #ffcccc;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="checkbox" data-bind="checked: done" />
    <input type="text" style="width: 200px;" 
     data-bind="disable: done, value: task, css: { urgent: task().indexOf('急') > -1 }" />
    <span data-bind="visible: done">完成!</span>
    <!-- 補充: 還有html, style, attr -->
</body>
</html>

另外,還有attr可以將屬性關聯到HTML元素的Attribute,html可以繫結元素的innerHTML,style可以直接指定CSS Style,都可如法炮製,不再另做示範。

[KO系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post

Comments

Be the first to post a comment

Post a comment