Question

有人可以告诉我“最佳实践”方法，在淘汰赛中为此UI（see screenshot）构建我的ViewModel [s]。我正在为发送传真的网站开发UI。用户创建作业并将文档上载到作业中。

UI负责将数据插入到db中，并在以后实时从db中提取状态信息。包括我需要使用淘汰赛提出的UI的截图。

用户通过在“查找”文本字段中键入作业名来查找作业。用户单击“加载”作业。与作业相关的所有文档都将加载到网格中。有3个框显示文档的每个状态的状态计数。 “待定”，“传真”和“错误”。用户点击状态框，网格将根据状态重新加载相应的文档记录。

这是我在加载作业时从API获得的内容：

 {
  "job_id": 222,
  "job_name": "January renewals",
  "job_status": "new",
  "documents":[
            {"item_id": 12312312, "item_name": "Form_client_1","item_status": "pending"},
             {"item_id": 2343243, "item_name": "Form_client_2","item_status": "pending"},
             {"item_id": 45435, "item_name": "Form_client_3","item_status": "sent"},
             {"item_id": 9999, "item_name": "Form_client_4","item_status": "error"}
             ]
}

请参阅用户界面的屏幕截图 - UI screenshot

什么代表状态框？怎么会粘在一起？

Answer 1

我建议以淘汰赛网站为例，打开一个jsbin并玩它。

但就像预告片一样，我会从

开始

 function JobViewModel(){
  var self = this; 
  self.jobId = ko.observable(); 
  self.jobName = ko.observable(); 
  self.jobStatus= ko.observable()
  self.documents = ko.observableArray()
 }
 function DocumentViewModel() {
  var self = this; 
  self.itemId= ko.observable(); 
  self.itemName= ko.observable(); 
  self.itemStatus= ko.observable(); 
 }
 function ViewModel(){
  var self = this; 
  self.jobs = ko.observableArray(); 
 }

 ko.applyBindings(new ViewModel());

从这一切你可以看到结构。您需要添加用于填充数据的函数。

编辑：

使用Computed Observable

 self.totals = ko.computed(function(){
       var total = 0; 
       ko.utils.arrayForEach(self.jobs(), function(job){
            total += job.documents().length; 
       });
 });

然后，您将这些总计绑定到此计算属性。

我也会调查ko.utils.arrayFilter。从那里，您可以构建具有特定状态或实际上您想要的任何内容的列表。

如何在knockout中正确构建相关对象的viewmodel？

1 个答案: