Question

在我的MVC Razor项目中，我以行显示数据（列表格式）。这些值使用javascript Knockout显示。

我想使用javascript KnockoutJs高亮显示所选行。有没有更好的方法来做到这一点。

这是我的代码

<ul class="navlist" data-bind="foreach:selectOptions" >                    
    <li><a href="#" data-bind="click:selectOption">
        <span data-bind="text:name"></span>
        <span data-bind="text:option"></span>
        <span data-bind="text:optiondate"></span></a>
    </li>                                        
</ul>

Answer 1

我做了fiddle，这很简单。

如您所见，我将所选选项存储在一个observable中。如果所选选项是当前选项，则数据绑定应用“突出显示”类。

<ul class="navlist" data-bind="foreach:selectOptions" >                    
    <li>
        <div data-bind="click:$parent.selectOption, css: {'highlight' : $parent.selectedOption() == $data }" style="cursor: pointer">
        <span data-bind="text:name"></span>
        <span data-bind="text:option"></span>
        <span data-bind="text:optiondate"></span>
        </div>
    </li>                                        
</ul>

查看型号：

vm = {
    selectOptions : [{name:'name1',option : 'option1',  optiondate:'optiondate1'},
                     {name:'name1',option : 'option2',  optiondate:'optiondate2'},
                     {name:'name3',option : 'option3',  optiondate:'optiondate3'}],
    selectOption :  function(opt){
        vm.selectedOption(opt);
    },
    selectedOption:  ko.observable()
}

ko.applyBindings(vm);

我希望它有所帮助。

Answer 2

我在这里发布了一些有用的信息： Storing selected row in array in JavaScript enter image description here avascript / 61581214＃61581214

使用javascript排行选定的行

2 个答案: