Question

我正在创建一个<li></li>列表，我循环浏览项目列表，如果项目存在于 myProjects 中，我会突出显示该背景。< / p>

我需要使用此函数两次，一次用于background属性，一次用于border属性。但对我来说，运行它两次似乎是多余的，所以有没有办法将对象返回到视图并在那里使用它两次？或者还有其他方法吗？

这可能不会影响加载时间吗？

模型

var vm = {
    myProjects: ko.observableArray(),
    projects: ko.observableArray(),
    inMyProjects: function (id) {
        var match = ko.utils.arrayFirst(vm.myProjects(), function (item) {
            return item.ProjectId() === id;
        });
        return match != null ? '#EEE' : '#777';
    }
};

查看

<ul class="projects" data-bind="foreach: projects">
    <li data-bind="text: Description, style: {
        backgroundColor: $parent.inMyProjects(ProjectId()),
        borderColor: $parent.inMyProjects(ProjectId())
    }">
    </li>
</ul>

Answer 1

让inMyProjects返回一个对象而不是值，并重用其中的值：

var vm = { myProjects：ko.observableArray（）， projects：ko.observableArray（）， inMyProjects：function（id）{ var match = ko.utils.arrayFirst（vm.myProjects（），function（item）{ return item.ProjectId（）=== id; }）; var result = match！= null？＆＃39;＃EEE＆＃39; ：＆＃39;＃777＆＃39;;

    return {
        backgroundColor: result,
        borderColor: result
    };

    }
};

然后在视图中使用它一次：

<ul class="projects" data-bind="foreach: projects">
    <li data-bind="text: Description, style: $parent.inMyProjects(ProjectId())">
    </li>
</ul>

抱歉，有点匆忙所以可能会有拼写错误，但你明白了。

Answer 2

不要依赖内联样式来做这样的事情，而是引入一些CSS：

.inMyProject {
    background-color: #...;
    border-color: #...;
}

然后，您可以使用Knockout's CSS binding：

为此课程提供li元素

<li data-bind="css: { 'inMyProject': $parent.inMyProjects(ProjectId()) }">

Answer 3

对背景颜色和边框使用css绑定类。 inMyProject只会被调用一次。

当然inMyProject现在应该返回一个boolan：

JS

inMyProjects: function (id) {
    var match = ko.utils.arrayFirst(vm.myProjects(), function (item) {
        return item.ProjectId() === id;
    });
    return match != null;
}

CSS：

projects li.in-my-projects {
    background-color: #EEE;
    border-color: #EEE;
}

projects li {
    background-color: #777;
    border-color: #777;
}

HTML：

<ul class="projects" data-bind="foreach: projects">
    <li data-bind="text: Description, 
                   css: { 'in-my-projects': $parent.inMyProjects(ProjectId()) }
    }">
    </li>
</ul>

我不想两次调用自定义函数

3 个答案:

JS

CSS：

HTML：