Jquery ui 淘汰：选择数组的子集
我想创建一个淘汰设置，允许用户将一个列表的子集选择到另一个列表中。我使用jquery UI选择第一个列表中的项目。当选择运行时，我将所选项目中的数据推送到第二个可观察数组中。我有一个绑定到第二个数组的标记，但在推送时它似乎没有更新 这是我的密码Jquery ui 淘汰：选择数组的子集,jquery-ui,knockout.js,Jquery Ui,Knockout.js,我想创建一个淘汰设置，允许用户将一个列表的子集选择到另一个列表中。我使用jquery UI选择第一个列表中的项目。当选择运行时，我将所选项目中的数据推送到第二个可观察数组中。我有一个绑定到第二个数组的标记，但在推送时它似乎没有更新 这是我的密码 <html> <head> <title>Sample</title> <link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/ui-ligh
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css"></link>
<style>
.ui-selected
{
border: 1px dotted red;
}
</style>
<script type="text/javascript" src="knockout-2.3.0rc.js"></script>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
function init()
{
function AppViewModel()
{
this.cars = ko.observableArray(
[
{year: 2004, make: "Chevy", model: "Malibu"},
{year: 1995, make: "Honda", model: "Civic"},
{year: 2004, make: "Chevy", model: "Malibu"},
{year: 1985, make: "Honda", model: "Civic"},
{year: 1984, make: "Chevy", model: "Malibu"},
{year: 1960, make: "Ford", model: "Ram"}
]);
this.selectedCars = ko.observableArray();
this.test=ko.observable("Bob");
}
ko.applyBindings(new AppViewModel());
$("#cars tbody").selectable(
{
filter: "tr",
selected: function( event, ui )
{
var selectedCarRow = ui.selected;
var bindingContext = ko.contextFor(selectedCarRow);
var observableCarData = ko.dataFor(selectedCarRow);
bindingContext.$parent.selectedCars().push(observableCarData.make);
//alert(bindingContext.$parent.selectedCars().length);
//alert(bindingContext.$parent.test());
}
});
}
</script>
</head>
<body onload="init()">
<table id="cars">
<thead><tr><th>Year</th><th>Make</th><th>Model</th></tr></thead>
<tbody data-bind="foreach: cars">
<tr>
<td data-bind="text:year"></td>
<td data-bind="text:make"></td>
<td data-bind="text:model"></td>
</tr>
</tbody>
</table>
<ul data-bind="foreach:selectedCars">
<li data-bind="text:$data"></li>
</ul>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</body>
</html>
在大多数情况下，您的代码是正确的。不过有一个小问题。在Selective selected函数中写入bindingContext。$parent.selectedCars.push这会将对象推入标准数组，而不是可观察数组。要进入可观察数组，在该数组中这些更改将触发击倒事件，您需要在数组对象上放置
bindingContext.$parent.selectedCars.push(observableCarData.make);