[英]Knockout.js: Select dropdown issue, always sets the “selected item” to the first option even when provided using “initial data”
jsFiddle: http://jsfiddle.net/wenbert/W2qLz/2/ jsFiddle: http : //jsfiddle.net/wenbert/W2qLz/2/
Even though I have provided the "initial data" for the selected_skill
array, the $data
becomes the first item in the select box. 即使我已为
selected_skill
数组提供了“初始数据”,但$data
成为选择框中的第一项。
var initialData = [
{
id: '1',
name: "Batman",
isDelete: false,
selected_skill: { <--- This part right here.
id: '2',
name: "Boxing",
isDeleted: false
},
skills: [
{
id: '1',
name: "Karate",
isDeleted: false},
{
id: '2',
name: "Boxing",
isDeleted: false
},
{
id: '6',
name: "Sonar",
isDeleted: false}
]},
{
id: '2',
name: "Hulk",
isDelete: false,
skills: [
{
id: '3',
name: "MMA",
isDeleted: false},
{
id: '4',
name: "Rage",
isDeleted: false},
{
id: '5',
name: "Extra Strength",
isDeleted: false}
]},
];
See the $data
part in the screenshot below 请参阅下面的屏幕截图中的
$data
部分
I have the initial_data
provided but when everything is "loaded", $data is automatically updated based on the first option for the select box. 我提供了
initial_data
,但是当“加载”所有内容时,$ data会根据选择框的第一个选项自动更新。
How do I set the "selected option" this way? 如何以这种方式设置“选择的选项”?
In the screenshot, the selected_skill
should have been: 在屏幕截图中,
selected_skill
应该是:
selected_skill: {
id: '2',
name: "Boxing",
isDeleted: false
}
jsFiddle: http://jsfiddle.net/wenbert/W2qLz/2/ jsFiddle: http : //jsfiddle.net/wenbert/W2qLz/2/
UPDATE: 更新:
The initialData
in my real app is loaded using $.getJSON()
. 我的真实应用程序中的
initialData
使用$.getJSON()
加载。 I do it with something like this: 我这样做是这样的:
$.getJSON(appUrl+"/getstuff/hero.json",
function(data){
ko.applyBindings(new Hero(data));
}
);
I can see that the result from the Firebug Console says that it is "Boxing" - I get Object { id="2", nameL: "Boxing", isDelete: false }
. 我可以看到Firebug控制台的结果说它是“ Boxing”-我得到了
Object { id="2", nameL: "Boxing", isDelete: false }
。 But then when everything has been rendered, the selected_skill
is becomes the first option. 但是,当所有内容渲染完毕后,
selected_skill
成为第一个选择。
I hope this is making sense. 我希望这是有道理的。 If not, I would be glad to answer clarifications through the comments.
如果没有,我将很乐意通过评论回答澄清。
FINAL UPDATE 最后更新
I used: 我用了:
return item.id() === data.selected_skill.id
instead of 代替
return data.selected_skill && skill.id === data.selected_skill.id;
then it worked. 然后它起作用了。
I have marked the correct answer. 我已标出正确答案。
The issue is that the selected_skill
object is a different object that the one in skills array rather than a reference to the same object. 问题在于,
selected_skill
对象是与技能数组中的对象不同的对象,而不是对同一对象的引用。
In JavaScript, 在JavaScript中,
var a = { name: "Bob" };
var b = { name: "Bob" };
var c = a;
alert(a === b); //false - different objects
alert(a === c); //true - reference to the same object
You would need to run some logic to match the selected object with one from the list. 您将需要运行一些逻辑以将所选对象与列表中的对象进行匹配。 Maybe something like: http://jsfiddle.net/rniemeyer/W2qLz/3/
也许像这样: http : //jsfiddle.net/rniemeyer/W2qLz/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.