1

ノックアウト 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 配列は、受け取った JSON データ オブジェクトを模倣します。その後、配列 LookData からの情報が HTML ページの一部になります。

これは一種の作業であり、HTML で結果を確認できますが、いくつか質問があります。

  1. 「foreach: LGoal」の代わりに「foreach: lookdata」を入れる必要があるのはなぜですか?
  2. 観測可能なデータを含む新しい行を配列に追加するにはどうすればよいですか?

PS: 英語が下手でごめんなさい

4

2 に答える 2

0

以下のコードを実行すると、質問に対する回答が得られます。

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

「foreach: LGoal」の代わりに「foreach: lookdata」を使用できるいくつかの変更を加えました..

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

newLookData メソッドは、json からデータを追加するために使用されます。

newEmptyLookData メソッドは、UI に空のデータを追加するために使用されます。

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());
于 2013-03-25T07:22:57.890 に答える
0

あなたのコードに特に問題はありません。少しリファクタリングして、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));
于 2013-03-24T21:37:33.570 に答える