與knockout.js中的數組有點小小的誤解

Question

我想了解一些knockout js的邏輯過程，我希望你能幫助我。可能有一個真實的原始問題，但在這種情況下，它們將與我的理解水平相似。

所以，這裏是js代碼：

LookData = [{ 
    slName: 'body weight', 
    slValue: '75', 
    slType: 'kg', 
    slDate: '01.02.03' 
}, { 
    slName: 'body fat', 
    slValue: '50', 
    slType: '%', 
    slDate: '02.03.04' 
}]; 


function LGoal(data) { 
    this.alooks = ko.observableArray(data.LookData); 
    this.ltitle = ko.observable(data.slName); 
    this.lvalue = ko.observable(data.slValue); 
    this.ltype = ko.observable(data.slType); 
    this.ldate = ko.observable(data.slDate); 
} 


function GoalListViewModel() { 
    var self = this; 
    self.lookgoals = ko.observableArray([]); 


    var mappedLookGoals = $.map(LookData, function (item) { 
     return new LGoal(item); 
    }); 
    self.lookgoals(mappedLookGoals); 


} 


ko.applyBindings(new GoalListViewModel(LookData)); 

的LookData陣列immitate JSON數據，我們接收對象。從陣列信息後LookData成爲HTML網頁的一部分：

這方面的工作，我可以看到在HTML的結果，但這裏有幾個問題：

1. 爲什麼我需要把「foreach：lookdata」而不是「foreach：LGoal」？
2. 我怎樣才能實現添加可視化數據到數組的新行？

P.S：索裏對我不好英語

Answer 1

我沒有看到你的代碼的任何特別的問題。我只是重構一下，我會讓GoalListViewModel在構造函數中接受它的數據。而且我不明白你在LGoal ViewModel中要做什麼 - 它在評論中。

這裏是我會做什麼：

function LGoal(data) { 
    //this does not make sense to me. Why the "data" object at this moment 
    //holds one item of your LookData collection - and there is no more 
    //inner LookData collection. 
    //this.alooks = ko.observableArray(data.LookData); 
    this.ltitle = ko.observable(data.slName); 
    this.lvalue = ko.observable(data.slValue); 
    this.ltype = ko.observable(data.slType); 
    this.ldate = ko.observable(data.slDate); 
} 


function GoalListViewModel(data) { 
    var self = this; 
    self.lookgoals = ko.observableArray([]); 


    var mappedLookGoals = $.map(data, function (item) { 
     return new LGoal(item); 
    }); 
    self.lookgoals(mappedLookGoals); 
} 

ko.applyBindings(new GoalListViewModel(LookData)); 

Answer 2

如果你去通過下面的代碼，你會得到你的問題的答案。

Why I need to put "foreach: lookdata" instead of "foreach: LGoal"? 

我做了一些改變，你可以使用 「的foreach：lookdata」 而不是 「的foreach：LGoal」 ..

How can I realize the adding of new row with observible data to array? 

newLookData方法用於從您的JSON添加數據。

newEmptyLookData方法用於向您的用戶界面添加空數據。

LookData = [{ 
slName: 'body weight', 
slValue: '75', 
slType: 'kg', 
slDate: '01.02.03' 
}, { 
slName: 'body fat', 
slValue: '50', 
slType: '%', 
slDate: '02.03.04' 
}]; 

function LGoal(data){ 
this.lookdata.push(new newLookData(data)); 
} 

function newLookData(data) { 
this.ltitle = ko.observable(data.slName); 
this.lvalue = ko.observable(data.slValue); 
this.ltype = ko.observable(data.slType); 
this.ldate = ko.observable(data.slDate); 
} 

//call this method to add empty row 
function newEmptyLookData(data) { 
this.ltitle = ko.observable(''); 
this.lvalue = ko.observable(''); 
this.ltype = ko.observable(''); 
this.ldate = ko.observable(''); 
} 

function GoalListViewModel() { 
    var self = this; 
    self.lookdata= ko.observableArray([]); 

    ko.utils.arrayForEach(LookData, function(item) { 
    LGoal(item); 
    }); 

} 

ko.applyBindings(new GoalListViewModel());