Javascript 选择渲染后取消绑定

所以我有一个Select，它有一个计算出的选项。每次选择选项更改时，我都要选择一个默认值

我尝试了几种不同的方法：

• subscribe to list-在列表返回之前调用，因此会更改可观察列表的值，但它不会正确呈现，因为列表在返回之后会更改

• afterRender-不适用于此类型的绑定

• OptionsafterRender-可以工作，正如下面的小提琴一样，但是它需要每个单独的项目，而不是在整个渲染过程中只进行一次，所以我觉得这样做是错误的

var rawData=[{
类型：“1”，
颜色：“蓝色”，
名称：“蓝色汽车”
}, {
类型：“2”，
颜色：“蓝色”，
名称：“蓝屋”
}, {
类型：“1”，
颜色：“红色”，
名称：“红色汽车”
}, {
类型：“2”，
颜色：“红色”，
名称：“红房子”
}];
var viewModel={
FirstSelectedOption:ko.observable（），
SecondSelectOptions:null，
Second Selected选项：ko.observable（），
加载：函数（）{
var-self=viewModel；
self.SecondSelectOptions=ko.computed（函数（）{
var selected=self.FirstSelectedOption（）；
var returnValue=新数组({
类型：“*”，
颜色：“全部”，
姓名：“全部”
});
var filteredlist=ko.utils.arrayFilter（原始数据，函数（项）{
返回项目。类型==所选；
});
returnValue=returnValue.concat（filteredlist）；
返回值；
}，自我）；
self.SecondSelectedOption.SetDefault=函数（）{
//我们希望默认值始终为蓝色，而不是“全部”，蓝色可能不是最后一个选项
var-self=viewModel；
var defaultoption=ko.utils.arrayFirst（self.SecondSelectOptions（），函数（项）{
返回项目。颜色==“蓝色”；
});
self.SecondSelectedOption（默认选项）；
};
}
};
Load（）；
应用绑定（视图模型）

汽车
房屋


选项AfterRender

回调传递两个参数：选项（元素）和项（绑定到选项的数据）。回调已在选项上循环，因此无需重复：

self.SecondSelectedOption.SetDefault = function (option, item) {
   var self = viewModel;
   if (item.Color === 'Blue')
       self.SecondSelectedOption(item);
};

参考：

编辑：也就是说，如果你不想每次都重新评估选项，

---

您还可以简单地在第一个

上使用

setDefault

方法绑定

change

事件。如果我遇到这个代码“问题”，我可能会将数据预处理成单独的数组，如在

中，您可以为颜色选择器创建两个选择。然后显示/隐藏取决于在汽车/房屋选择器中所做的选择…嗯，这已经够疯狂的了…我不确定我是否喜欢它，但是因为数据实际上是动态加载的，并且有很多数据，所以当选择第一个选择器上的其他选项时，我必须动态地将它们添加到dom中，但这并非不可能。显然，snipet不是我的实际代码，它简化了。ThanxBah为什么我没有想到这一点。这仍然意味着每当一个项目被添加到列表中时，它都会被调用，这对于更大的列表来说可能是一个很大的问题，但是您已经消除了循环，所以我不太关心性能。我认为如果不重写整件事或一个大的定制绑定，就不可能做得更好。Thanx@如果需要，还可以将数据预处理为数组。如果您有可能将颜色和属性类型（实际上是一个“计算”属性）分开，使其更具语义，请参阅我的编辑。@Tybiltz我明天将尝试更改事件，但不确定它是否会按正确的顺序触发，易于测试。我不能像那样分割数据，我可以，但它会造成比它解决的问题多得多的问题，因为实际数据要复杂得多，用于更多的地方，甚至比这个例子显示的更相互关联。我白手起家地写了这把小提琴，作为反映我想做的事情的最简单的作品。它剥离了很多层。如果数据真的像示例一样简单的话，有很多事情我是不会这样做的。但是谢谢你！