Question

我是KnockoutJS的新手。我试图将不同的模型绑定到嵌套的foreach 但是当我通过jquery绑定模型时我坚持了下来。这是我的小提琴 http://jsfiddle.net/pKCNf/ 它会在单击按钮时显示警告框中的对象，但不会将其绑定到内部foreach。

Jquery的：

    var arr = new Array();

    function viewModel(id, title, desc, name) {

        var self = this;
        self.messageId = ko.observable(id);
        self.title = ko.observable(title);
        self.description = ko.observable(desc);
        self.name = ko.observable(name);            
        self.commentList = ko.observableArray([]);

    }

    function commentViewModel(newsId, firstName, lastName, comment) {
        var self = this;
        self.newsId = ko.observable(newsId);            
        self.FirstName = ko.observable(firstName);
        self.LastName = ko.observable(lastName);
        self.comment = ko.observable(comment);
    };

    function simpleBinding() {
        var self = this;
        self.businessMessages = ko.observableArray([
            new viewModel(1,'ABC','kdshfkh','John Mathew'),
            new viewModel(2,'MNP','kdshfkh','John Mathew')
        ]);


        self.getComment = function (cmt) {

                    var vm = new viewModel();
                    var cmtArray = new Array();
                    var entry = new commentViewModel(18, 'John', 'Mathew', 'Hiii');
                    cmtArray.push(entry);
                    vm.commentList(cmtArray);
                    alert(vm.commentList());
                    $('.nestedArea').slideToggle();
                    console.log(vm.commentList());
        };

    }

    var modelBind = new simpleBinding();
    ko.applyBindings(modelBind);

Answer 1

鉴于你的小提琴，我已经做了一些更新，以帮助你进一步 - see here。

self.getComment函数正在创建一个新的viewModel，而不是使用UI绑定的那个。所以这改为：

self.getComment = function (cmt) {
    //cmt is the "viewModel" instance which "clicked"                    
    var entry = new commentViewModel(18, 'John', 'Mathew', 'Hiii');
    cmt.commentList.push(entry);

    $('.nestedArea').slideToggle();
    console.log(vm.commentList());
};

此外，HTML中的绑定（仅显示在小提琴中）在FirstName和LastName字段中出现大小写不匹配。

考虑到所有这些，您应该能够继续，但是，您可能希望考虑使模型更加封装。 getComment函数应该在viewModel对象中，因为它正在尝试更新该实例的属性 - 正常的OO内容。

Answer 2

嗯，你快到了。 http://jsfiddle.net/pKCNf/2/

<div data-bind="foreach:businessMessages">
  <p data-bind="text:messageId"></p>
   <p data-bind="text:title"></p>
   <p data-bind="text:description"></p>
   <p data-bind="text:name"></p>
  <button data-bind="click: addComment">Add Comment</button>
  <div class="nestedArea" data-bind="foreach:commentList">
    <p data-bind="text:newsId"></p>
    <p data-bind="text:firstName"></p>
    <p data-bind="text:lastName"></p>
    <p data-bind="text:comment"></p>
  </div>
</div>

function viewModel(id, title, desc, name) {
  var self = this;
  self.messageId = ko.observable(id);
  self.title = ko.observable(title);
  self.description = ko.observable(desc);
  self.name = ko.observable(name);            
  self.commentList = ko.observableArray([]);

  self.addComment = function() {
    self.commentList.push(new commentViewModel(18, 'John', 'Mathew', 'Hiii'));
  }
}

function commentViewModel(newsId, firstName, lastName, comment) {
  var self = this;
  self.newsId = ko.observable(newsId);            
  self.firstName = ko.observable(firstName);
  self.lastName = ko.observable(lastName);
  self.comment = ko.observable(comment);
};

function simpleBinding() {
  var self = this;
  self.businessMessages = ko.observableArray([
    new viewModel(1,'ABC','kdshfkh','John Mathew'),
    new viewModel(2,'MNP','kdshfkh','John Mathew')
  ]);
}

var modelBind = new simpleBinding();
ko.applyBindings(modelBind);

在淘汰赛中用不同的模型绑定嵌套的foreach

2 个答案: