淘汰赛动态绑定问题 [英] knockout dynamic binding issue
问题描述
考虑到通过淘汰赛映射插件生成以下视图模型。
VAR originalData = {QuoteSelectedViewModel：{
产品名称：选择，
CoverQuotesViewModel：[
{
code：1，
标签：$ P $pmière援助24小时/ 24（GRATUITE），
IsMandatory：真实，
IsSelected：真实，
依赖于取决于： []
}，
{
code：2，
标签：援助PLUS 24小时/ 24，
IsMandatory：假的，
IsSelected：假的，
依赖于取决于： []
}，
{
code：8，
标签：Heurts ANIMAUX /强制德拉自然，
IsMandatory：假的，
IsSelected：假的，
依赖于取决于： [
2
]
}，
]}
}VAR视图模型= ko.mapping.fromJS（originalData）;ko.applyBindings（视图模型）;
＆LT; DIV数据绑定=有：QuoteSelectedViewModel＆GT;
选定报价为：LT;跨度数据绑定=TEXT：产品名称＆GT;＆LT; / SPAN＆GT;
！＆LT; - 阁的foreach：CoverQuotesViewModel - ＆GT;
＆LT; BR /＆GT;
＆LT; DIV数据绑定：如：ISVISIBLE＆GT;
＆LT;输入类型=复选框数据绑定=选中：IsSelected＆GT;＆LT; /输入＆GT;
＆LT;输入类型=文本数据绑定=值：标签，启用：IsSelected＆GT;＆LT; /输入＆GT;
＆LT; / DIV＆GT;
＆LT;！ - / KO - ＆GT;
＆LT; / DIV＆GT;
现在，我想隐藏div时可见性返回false。可见性还不存在，并且它应该是CoverQuotesViewModel阵列的每个元件上的计算可观察功能。
如何生成每个元素此计算的可观察的功能？
感谢
的
我在这里加了的jsfiddle： http://jsfiddle.net/graphicsxp/fpKWM/
其实淘汰赛文档是清楚如何做到这一点：
当然，创建回调里面，你可以做另一个呼叫
ko.mapping.fromJS如果你想。一个典型的用例可能是，如果你想
与一些额外扩充原始JavaScript对象
计算观测：
变种myChildModel =函数（数据）{
ko.mapping.fromJS（数据，{}，这一点）;this.nameLength = ko.computed（函数（）{
返回this.name（）的长度。
}， 这个）; }
下面是完整的code以下保罗的建议：
（getQuotesSuccess是一个AJAX成功处理程序）viewModel.getQuotesSuccess =功能（结果）{
VAR myCoverQuotesViewModel =功能（数据，父）{
VAR自我=这一点;
ko.mapping.fromJS（数据，{}，这一点）; self.IsVisible = ko.computed（函数（）{
VAR可见=真实的;
如果（self.DependsOn（）长度方式＆gt; 0）{
$。每个（self.DependsOn（）函数（指数值）{
VAR依赖= viewModel.QuoteSelectedViewModel（）CoverQuotesViewModel.filterByProperty（code，值）。
如果（依赖性（）长度的方式＆gt; 0）{
可见=可见的放大器;依赖性（）[0] .IsSelected（）;
}其他{
可见=虚假的;
}
}）;
} 返回可见; }， 这个）;
}VAR映射= {
CoverQuotesViewModel：{
创建：功能（选件）{
返回新myCoverQuotesViewModel（options.data，options.parent）;
}
}
} ko.mapping.fromJS（结果，映射视图模型）;
};
解决方案好吧，回到原来我刚才的回答，您的修改，所以任何人都看着这个答案实际上得到了正确的版本！
您需要创建一个子viwe模型，并使用映射插件可以自动填充它，然后添加在你的计算观察到的：
函数CoverQuotesViewModel（数据）
{
VAR自我=这一点;
ko.mapping.fromJS（数据，{}，个体经营）; //将数据复制到每个属性。
self.IsVisible = ko.computed（函数（）
{
//你的每一个报价逻辑
}）;
}然后，你需要使用的主视图模型的映射创建地图，并在此创建您的孩子视图模型：
VAR映射= {
CoverQuotesViewModel：{
创建：功能（选件）{
VAR模型=新CoverQuotesViewModel（options.data）;
回归模型;
}
}
}
VAR视图模型= ko.mapping.fromJS（数据，映射）;您并不需要通过
这个进入计算，因为你引用的自我，这是您存储的这个版本。Consider the following ViewModel that is generated through the knockout mapping plugin.
var originalData = { "QuoteSelectedViewModel": { "ProductName": "Select", "CoverQuotesViewModel": [ { "Code": 1, "Label": "Première Assistance 24h/24 (GRATUITE)", "IsMandatory": true, "IsSelected": true, "DependsOn": [] }, { "Code": 2, "Label": "Assistance PLUS 24h/24", "IsMandatory": false, "IsSelected": false, "DependsOn": [] }, { "Code": 8, "Label": "Heurts Animaux / Force de la Nature", "IsMandatory": false, "IsSelected": false, "DependsOn": [ 2 ] }, ]} } var viewModel = ko.mapping.fromJS(originalData); ko.applyBindings(viewModel); <div data-bind="with: QuoteSelectedViewModel"> selected quote is : <span data-bind="text: ProductName"></span> <!-- ko foreach: CoverQuotesViewModel --> <br/> <div data-bind: if: IsVisible> <input type="checkbox" data-bind="checked: IsSelected"></input> <input type="text" data-bind="value: Label, enable: IsSelected"></input> </div> <!-- /ko --> </div>Now, I would like to hide the div when IsVisible returns false. IsVisible does not exist yet, and it should be a computed observable function on each element of the CoverQuotesViewModel array.
How do I generate this computed observable function on each element ?
Thanks
[EDIT] I've added a jsfiddle here : http://jsfiddle.net/graphicsxp/fpKWM/
[EDIT2] Actually knockout document is clear about how to do that:
Of course, inside the create callback you can do another call to ko.mapping.fromJS if you wish. A typical use-case might be if you want to augment the original JavaScript object with some additional computed observables:
var myChildModel = function(data) { ko.mapping.fromJS(data, {}, this);
this.nameLength = ko.computed(function() { return this.name().length; }, this); }
[EDIT]
Here's the full code following Paul's suggestion: (getQuotesSuccess is an AJAX success handler)
viewModel.getQuotesSuccess = function (result) { var myCoverQuotesViewModel = function (data, parent) { var self = this; ko.mapping.fromJS(data, {}, this); self.IsVisible = ko.computed(function () { var visible = true; if (self.DependsOn().length > 0) { $.each(self.DependsOn(), function (index, value) { var dependency = viewModel.QuoteSelectedViewModel().CoverQuotesViewModel.filterByProperty("Code", value); if (dependency().length > 0) { visible = visible & dependency()[0].IsSelected(); } else { visible = false; } }); } return visible; }, this); } var mapping = { 'CoverQuotesViewModel': { create: function (options) { return new myCoverQuotesViewModel(options.data, options.parent); } } } ko.mapping.fromJS(result, mapping, viewModel); };
解决方案Ok, reverting back to my earlier answer, with your modifications, so anyone else looking at this answer actually gets the correct version!
You need to create a child viwe model, and use the mapping plugin to populate it automatically, then add in your computed observable:
function CoverQuotesViewModel(data) { var self = this; ko.mapping.fromJS(data, {}, self); // Copy the data to each property. self.IsVisible = ko.computed(function() { // your logic for each quote }); }Then you need to use a create map for the mapping of the main view model, and in this you create your child view model:
var mapping = { 'CoverQuotesViewModel': { create: function(options) { var model = new CoverQuotesViewModel(options.data); return model; } } } var viewModel = ko.mapping.fromJS(data, mapping);You don't need to pass
thisinto the computed, as you are referencing self, which is your stored version of this.这篇关于淘汰赛动态绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
