时间戳

首页 > 解决方案 > 带有未定义的 Knockout.js 切换样式

knockout.js - 带有未定义的 Knockout.js 切换样式

问题描述

我想根据可观察属性切换样式，该属性一开始并不存在。所以它是未定义的。但是在单击它时它会被定义（一个功能），但由于某种原因样式不会改变。我 console.log VM，属性出现在那里。代码如下。

<!DOCTYPE html>
<html>

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

        <script>
            function ViewModel_icon() {
                self2 = this;
                self2.tasks = ko.observableArray([
                    {
                        task: ko.observable("Task1"),
                        time: ko.observable("Saturday, 5 May 2018"),
                        status: ko.observable("active"),
                        priority: ko.observable("medium")
                    }
                ]);

                self2.checkUrgent = function (data){
                    if(data.urgent === undefined){
                        data.urgent = ko.observable('true');
                    }
                }
            }

            var VM1 = new ViewModel_icon();

            ko.applyBindings(VM1);
        </script>

    </head>
    <body>
        <div id="icon" data-bind='foreach: tasks'>
        <i class="fas fa-exclamation-circle" data-bind='click: $parent.checkUrgent, style: {"color" : $data.urgent !== undefined? "red" : "black"}'></i>
        </div>
    </body>
</html>

标签： knockout.js

解决方案

我看到属性紧急代表一个布尔值；因此，与其不定义它，不如将其初始化为 false，因为只有 2 个有效值（true 或 false）。

看看下面代码的可运行重构。

function ViewModel_icon() {
    self2 = this;
    self2.tasks = ko.observableArray([
    {
        task: ko.observable("Task1"),
        time: ko.observable("Saturday, 5 May 2018"),
        status: ko.observable("active"),
        priority: ko.observable("medium"),
        urgent: ko.observable(false)
    }
    ]);

    self2.checkUrgent = function (data){
                
        if(!data.urgent()){
            data.urgent(true);
        }
    }
}

var VM1 = new ViewModel_icon();            
ko.applyBindings(VM1);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="icon" data-bind='foreach: tasks'>    
    <i class="fas fa-exclamation-circle" data-bind='click: $parent.checkUrgent, style: {"color" : $data.urgent() ? "red" : "black"}'></i>
</div>

推荐阅读