Question

我有一个JS对象：

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

我想绑定到整个对象，在textarea中显示备注，并订阅对备注的更改。

这是我到目前为止所拥有的：

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>

这不起作用。我需要做些什么来使我的工作方式符合我的要求呢？

谢谢！

Answer 1

以下是Fiddle中的示例。

你可以这样做：

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

并为您的书签创建viewmodel，如下所示：

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，如下所示：

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

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

1 个答案: