在javascript中声明动态knockout可观察对象

本文关键字：观察 对象 knockout 动态 javascript 声明 | 更新日期: 2023-09-27 18:09:08

我在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;

在javascript中声明动态knockout可观察对象

您可以使用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());
});
相关文章：