javascript - 在javascript中声明可观察到的动态 knockout

Question

我正在使用 asp.net mvc 实现 knockout ，我在 asp.net mvc 中有一个 View 模型。我有一个基于 asp.net mvc View 模型中每个类的属性名称的值使用服务器端生成的数组列表。例如:Array[] propertyName = { name1, name2, name3 }。现在我需要使所有这些属性名称都可观察，如下所示。我可以在 javascript 中逐一键入它，但问题是它应该根据 asp.net mvc 中定义的 View 模型中可用的属性是动态的。现在我硬编码 name1, name2, name3 buy 我不知道如何根据从服务器返回的数组使其动态化。

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

Answer 1

您可以使用 ko.mapping用于根据模型属性创建 ko.observables 的插件。所以假设，如果您有一个传递给 Razor View 的以下模型

 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 View 模型可观察对象。

<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 中创建为可观察对象。