在淘汰赛中将嵌套的 foreach 与不同的模型绑定答案

【问题标题】：binding nested foreach with different models in knockout在淘汰赛中将嵌套的 foreach 与不同的模型绑定
【发布时间】：2014-04-26 07:49:23
【问题描述】：

我是 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);

【问题讨论】：

标签： jquery knockout.js foreach

【解决方案1】：

嗯，你快到了。 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);

【讨论】：

【解决方案2】：

鉴于您的 Fiddle，我已经进行了一些更新以让您更进一步 - 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 中的绑定（仅在 Fiddle 中显示）在 FirstName 和 LastName 字段中存在大小写不匹配。

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

【讨论】：