我正在创建 knockout data-bind
在 MVC 中动态使用 .cshtml 属性。我只想绑定(bind) viewModel 中可用的那些属性,我再次从 Restful WCF 的结果动态创建这些属性。
因此,viewModel 中可能有也可能没有某些可用的键
例如:<span data-bind="text: cli"></span>
已创建。
但是当我绑定(bind) viewModel 时,我收到一条错误消息“在 viewModel 中找不到‘cli’属性”。但是,我想仅当该键首先存在于 viewModel 中时才绑定(bind)该属性。
$(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>
一个相关的选项可能是您在 View 模型上创建一个 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>
请注意,如果这些属性是可观察的,则此代码会略有不同,如果可以是其中之一,则甚至会更加不同(并且复杂)。
另一种选择可能是查看 this blog post 的第 3 点,在包装现有绑定(bind)时:您可以创建另一个“文本”绑定(bind)来防止这种情况。
PS。我会仔细重新考虑你的设计。属性是“可选”的事实很可能与某些领域概念有关。PPS。您还可以考虑使用空对象模式服务器端,这个问题就完全消失了。
购买力平价。这是规避该问题的最后一种方法,(合乎逻辑,但)令我惊讶的是:
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>
关于javascript - 如何为仅可用的键绑定(bind) Knockout viewModel?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28315672/