在javascript中声明动态knockout可观察对象
declaring dynamic knockout observable in javascript
我在asp.net mvc中实现了一个视图模型。我有一个列表的数组生成使用服务器端基于属性名称的值在asp.net mvc视图模型中的每个类。Array[] propertyName = {name1, name2, name3}。现在我需要使所有这些属性Name可观察如下。我可以在javascript中输入它,但问题是它应该是动态的,根据在asp.net mvc中定义的视图模型中可用的属性。现在我硬编码name1, name2, name3,但我不知道如何使其动态根据数组从服务器返回。
<script>
function TestViewModel() {
var self = this;
self.name1 = ko.observable('@name1') //from view model (need to be dynamic)
self.name2 = ko.observable('@name2') //from view model (need to be dynamic)
self.name3 = ko.observable('@name3') //from view model (need to be dynamic)
self.btn1 = ko.observable(false); //hardcoded base on html
self.btn2 = ko.observable(true); //hardcoded base on html
}
ko.applyBindings(new TestViewModel());
</script>
// What i expect
<script>
function TestViewModel() {
var self = this;
Array[] propertyName = { name1, name2, name3 } // value retrieve from server
@foreach(var item in propertyName) {
// and knockout js can run this
self.@propertyName = ko.observable(@propertyName)
}
self.btn1 = ko.observable(false); //hardcoded base on html
self.btn2 = ko.observable(true); //hardcoded base on html
}
ko.applyBindings(new TestViewModel());
</script>
// fail because self.@propertyName
self.@propertyName = ko.observable(@propertyName)
= expected identifer
ko expected;
您可以使用ko。用于创建ko的映射插件。基于模型属性的可观察对象。假设,如果你有一个你传递给剃刀视图的模型
public class PersonVM
{
public int Id { get; set; }
public String Name { get; set; }
public String Address { get; set; }
}
然后你可以使用序列化模型作为json对象并传递给你的TestViewModel函数,并使用ko.mapping.fromJs(data,{},this)将c#模型属性映射到你的客户端knockout viewmodel可观察对象。
<script type="text/javascript">
function TestViewModel(data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
self.btn1 = ko.observable(false); //hardcoded base on html
self.btn2 = ko.observable(true); //hardcoded base on html
}
var jsonEncodedModel = @Html.Raw(JsonConvert.SerializeObject(Model));
ko.applyBindings(new TestViewModel(jsonEncodedModel));
</script>
然后你的模型属性Id, Name, Address将被创建为TestViewModel中的可观察对象。
在这种情况下,应该在加载页面时调用服务器。例如:
function TestViewModel() {
var self = this;
self.items = ko.observableArray();
//call server to load the items
$.ajax({
url: 'someUrl',
data: 'someValueFromTheView'
}).done(function (result) {
self.items(result);
});
};
//run the bindings when the page is loaded
$(function () {
ko.applyBindings(new TestViewModel());
});
相关文章:
- 在ko.applyBindings(..)中执行Knockout js订阅函数(用于可观察对象)
- Knockout.js用单个json对象绑定一个可观察对象
- 根据某些条件将 JS 绑定到可观察对象内的数组元素
- 如何从挖空可观察对象中获取所选项目的文本
- 从另一个可观察对象获取价值的最佳方法,而无需组合最新
- 可观察对象的角 2 条件链接
- 观察对象是否已更改
- 如何在 angularjs 中观察对象中的对象
- 将通过原型计算的可观察对象添加到构造函数中
- 挖空解包可观察对象无法按预期工作
- 如何从可观察对象数组中删除项目
- 使用 Knockout 和 Typescript.如何从订阅中更改可观察对象的值
- Knockout+Moment.js–更新可观察对象内的相对日期
- 在AngularJS中观察对象
- 角度,观察对象中的特定关键点
- 微风导航阵列成员是淘汰赛中的可依赖观察对象
- 在knockout.js中为可观察对象添加属性后为什么出现TypeError
- Knockout js,访问循环外的可观察对象
- 敲除:绑定到同一可观察对象的几个 DOM 元素
- KnockoutJS-一个计算可写的可观察对象;无法正确更新绑定