Knockout.js与映射对象绑定并订阅属性更改

Question

I have a JS object:

var bookmark = {
   id: 'id',
   description: 'description',
   notes: 'notes'
}

I want to bind to the entire object, display notes in a textarea, and subscribe to changes to notes.

Here's what I have so far:

this.bookmark = ko.observable();

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

I'm setting the bookmark like so:

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

The view looks like this:

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

This isn't working. What do I need to do to make this work the way I want it to work?

Thanks!

Answer 1

Here is a example in Fiddle .

You could do something like this:

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

and create viewmodel for your bookmark, like so:

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

after you get your data, create VM for every item, like so:

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

You can create a seperate service to get your data, i just mocked this for 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));
});