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

Question

I'm creating a <li></li> list where I loop through a list of projects , and if the project exist in myProjects I highlight that background.

I need to use this function twice, once for the background property and once for the border property. But to me it seems redundant having to run it twice, so is there a way to kind of return the object to the view and use it twice there? Or is there some other way around this?

Maybe this won't affect the loading time that much anyway?

Model

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';
    }
};

View

<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

Make inMyProjects return an object instead of the value and reuse the value in it:

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 ? '#EEE' : '#777';

    return {
        backgroundColor: result,
        borderColor: result
    };

    }
};

And then use it once in the view:

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

Sorry, a bit in a hurry so there may be a typo but you get the point.

Answer 2

Don't rely on inline styling for things like this, introduce some CSS instead:

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

You can then give your li element this class with Knockout's CSS binding :

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

Answer 3

Use the css binding with a class for both the background color and the border. inMyProject will be called only once.

Of course inMyProject should return a boolan now:

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>