2016-10-22 7 views
2

私はJSオブジェクトを持って変更します。Knockout.jsは

は、ここで私がこれまで持っているものです。

this.bookmark = ko.observable(); 

this.bookmark.subscribe = function(bookmarkWithNewNotes) { 
    //use the bookmarkWithNewNotes.id to update the bookmark in the db 
} 

私はそうのようにブックマークを設定しています:

this.bookmark(ko.mapping.fromJS(existingBookmark)); 

ビューは次のようになります。

<div databind="with: $root.bookmark" > 
    Notes 
    <textarea class="userNotes" rows="10" data-bind="value: notes" ></textarea> 
    </div> 

このISN」働いている。私はそれが働くようにこの仕事をするために何をする必要がありますか?

ありがとうございます!

+0

であなたの質問を更新してください**実行可能** [MCVE]スタックスニペット( '<>'ツールバーのボタン)ので、我々は簡単にコンテキストで問題を見て、あなたはそれを修正することができますを使用して。 –

+0

私はしようとしましたが、外部マッピングファイルが正しく動作するようにはできません。すごく疲れた。私は朝にもう一度お試しになります。 – MayNotBe

+0

Btw、データバインド= "" not databind = "" – Joonas89

答えて

0

Fiddleの例を示します。

あなたはこのような何か行うことができます:、あなたがあなたのデータを取得後、

function BookmarkViewModel(id, description, note) { 
    var self = this; 

    self.id = id; 
    self.description = ko.observable(description); 
    self.note = ko.observable(note); 

    self.note.subscribe(function(val) { 
     alert("Save note, id: " + self.id + ", description: " + self.description() + ", note: " + self.note()); 
    }); 

    return self; 
} 

すべての項目のためのVMを作成します。

<div> 
    Notes 
    <div data-bind="foreach: bookmarks"> 
     <textarea rows="10" data-bind="value: note"></textarea> 
    </div> 
</div> 

などのように、あなたのブックマークののviewmodelを作成しますように:

function AppViewModel(data) { 
    var self = this; 

    self.bookmarks = ko.observableArray(); 

    for (var i = 0; i < data.length; i++) { 
     self.bookmarks().push(new BookmarkViewModel(data[i].id, data[i].description, data[i].note)); 
    }; 

    return self; 
} 

あなたができますあなたのデータを得るために別々のサービスを食べました。私はこれをpocのために嘲笑しました。

$(function() { 

    var data = [{ 
     id: 1, 
     description: 'some description', 
     note: 'some note' 
    }, { 
     id: 2, 
     description: 'some other description', 
     note: 'some other note' 
    }]; 

    ko.applyBindings(new AppViewModel(data)); 
}); 
+1

ありがとうございます。それが正しい軌道に乗ったので、私は実用的なソリューションを実装することができました。 – MayNotBe