javascript - 使用javascript选择行

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

我做了一个小提琴，很简单。

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

<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