Question

我正在使用asp.net mvc实现淘汰赛，我在asp.net mvc中有一个viewmodel。我有一个使用服务器端生成的数组列表，基于asp.net mvc视图模型中每个类的属性名称的值。例如：Array [] propertyName = {name1，name2，name3}。现在我需要将所有这些属性名称observable如下所示。我可以在javascript中逐个输入1，但问题是它应该是动态的，根据asp.net mvc中定义的视图模型中可用的属性。现在我是hardcodng name1，name2，name3买，我不知道如何根据服务器的数组返回动态。

＆＃13;

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

＆＃13;

Answer 1

在这种情况下，您应该在加载页面时调用服务器。例如：

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());
});

Answer 2

您可以使用ko.mapping插件根据模型属性创建ko.observable。因此，假设您有一个传递给剃刀视图的以下模型

 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 observables。

<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中创建为observable。

在javascript中声明动态淘汰可观察

2 个答案: