如何绑定仅可用键的挖空视图模型
How to bind Knockout viewModel for only available keys?
我正在使用MVC中的.cshtml动态创建淘汰data-bind
属性。我只想绑定那些在viewModel中可用的属性,我再次从休息的WCF的结果动态创建这些属性。
因此,视图中可能存在也可能没有可用的键模型例如:创建<span data-bind="text: cli"></span>
。
但是当我绑定视图模型时,我收到一个错误,如"在视图模型中找不到'cli'属性"。但是,我想仅当该键首先存在于 viewModel 中时才绑定该属性。
$(document).ready(function () {
debugger;
$.ajax({
cache: false,
type: "GET",
async: false,
dataType: "json",
url: requestURL,
success: function (data) {
debugger;
if (data.GetCircuitCheckStatusResponse.Status.HasErrors == false) {
networkData = data.GetCircuitCheckStatusResponse.Response.RunningStatus.networkData;
diagnosticData = data.GetCircuitCheckStatusResponse.Response.RunningStatus.diagnosticData;
diagnosticsInfo = {};
//To Create boxPanel Datas
for (var i = 0; i < networkData.length; i++) {
diagnosticsInfo[networkData[i].ItemTitle] = networkData[i].itemValue;
}
//To Bind the data using Knockout
}
},
error: function (xhr) {
debugger;
alert(xhr.responseText);
}
});
debugger;
var viewModel = ko.mapping.fromJS(diagnosticsInfo);
ko.applyBindings(viewModel);
// Every time data is received from the server:
//ko.mapping.fromJS(data, viewModel);
});
@foreach (var nameValue in childContainer.NameValueImageItemsList)
{
var cssClass = "nameValueItem floatLeft" + " " + nameValue.DataBindName;
<div class="@cssClass" style="">@nameValue.DisplayName</div>
<div class="@cssClass" style="width: 200px; margin-right: 10px;" ><span data-bind="text: CLI"></span></div>
<div class="@cssClass" style="width: 200px; margin-right: 10px;">
<a>
@if (nameValue.IconImageURL != null && nameValue.IconImageURL != "")
{
<img src="@nameValue.IconImageURL" alt="i"/>
}
</a>
</div>
<div class="clearBOTH"></div>
}
这是一个非常简单的方法:
ko.applyBindings({
description: 'some description'
// ,title: 'my title'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Description: <span data-bind="text: description"></span><br />
Title: <span data-bind="text: !!title ? title : ''"></span>
一个相关的选项可能是在视图模型上创建safeTitle
计算属性:
var Vm = function() {
var self = this;
self.description = 'my description';
//self.title = 'my title';
self.safeTitle = ko.computed(function() {
return !!self.title ? self.title : '';
});
};
ko.applyBindings(new Vm());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Description: <span data-bind="text: description"></span><br />
Title: <span data-bind="text: safeTitle"></span>
此外,您还可以使用函数来执行此操作,因此您不必为每个属性创建可观察量:
var Vm = function() {
var self = this;
self.description = 'my description';
//self.title = 'my title';
self.safeGet = function(prop) {
return !!self[prop] ? self[prop] : '';
};
};
ko.applyBindings(new Vm());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Description: <span data-bind="text: description"></span><br />
Title: <span data-bind="text: safeGet('title')"></span>
请注意,如果这些属性是可观察的,则此代码将略有不同,如果可以是其中之一,则甚至会有所不同(且复杂)。
另一种选择可能是查看这篇博文的第 3 点,关于包装现有绑定:您可以创建另一个"文本"绑定来防止这种情况。
附言。我会仔细重新考虑你的设计。属性是"可选"的事实很可能与某些域概念有关。
.PPS。您也可以考虑使用 Null 对象模式服务器端,这个问题完全消失了。
购买力平价。这是规避该问题的最后一种方法,(合乎逻辑,但)令我惊讶:
ko.applyBindings({
desc: 'some description'
// ,title: 'my title'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Description: <span data-bind="text: $data.desc"></span><br />
Title: <span data-bind="text: $data.title"></span>
这就是它对我的工作方式:
<span data-bind="text: $data['@nameValue.DataBindName'] "></span>
相关文章:
- 角度指令没有更新模型视图
- “渲染骨干模型视图”返回未定义的结果
- 轮询更新主干模型/视图的请求
- 节点.js中的模型-视图-控制器模式
- 图像数据中的更改未反映在模型视图中
- 自定义 ngModel 指令以支持 jquery 插件中的模型>视图绑定
- 优化显示简单项目列表的模型/视图
- 建议:在JavaScript中难以使用模型视图控制器
- 将三维世界矢量转换为模型视图矩阵
- 在主干模型/视图上处理更复杂的验证逻辑(必填字段等)的最佳方式
- AngularJS在POST http请求上更新模型/视图
- web应用程序模型视图中的Java脚本
- 我的第一个骨干模型/视图.我的思路对吗?
- Knockoutjs的日期时间字段更新不会刷新模型视图
- Backbone.js中的嵌套集合/模型视图管理
- Javascript“this"模型视图演示器设计中的问题
- 模型视图控制器-javascript mvc框架设计实践,用于编辑就地界面
- 模型视图控制器-任何使用javascript mvc的人
- 模型视图控制器-我们是否在使用JavaScriptMVC(MVVM)框架,如Backbone.js、Angular等
- 模型视图控制器-AngularJS中是否可以在经典的javascript函数中使用数据绑定