knockout.js 从另一个视图模型初始化视图模型答案

【问题标题】：knockout.js initialize viewmodel from another viewmodelknockout.js 从另一个视图模型初始化视图模型
【发布时间】：2017-08-28 04:47:33
【问题描述】：

这是我的代码

视图模型 1

function AppViewModel() {
var self = this;
self.boardtext = ko.observable();
self.board = ko.observableArray([
    { boardname: 'Board' },
    { boardname: 'Board' },
    { boardname: 'Board' }
]);

self.addboard = function () {
    self.board.push({ boardname: self.boardtext() });
    // initialize ListModal to zero
};

self.removeboard = function () {
    self.board.remove(this);
}

}

视图模型 2

 var initialData = []; 

var ListModal = function (lists) {
    var self = this;
    self.cardtext = ko.observable();
    self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) {
        return { listname: list.listname, cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) };
    }));



};

ko.applyBindings(new AppViewModel(), document.getElementById("container1"));
ko.applyBindings(new ListModal(initialData), document.getElementById("container2"));

当我按下 addboard 时，如何将我的 ListModal 设置为零？

【问题讨论】：

标签： javascript asp.net-mvc mvvm knockout.js

【解决方案1】：

如果您想重新初始化 listModal，请尝试将这 2 个视图模型包装在 1 个视图模型中，以便它们可以相互关联。然后您可以执行以下操作：

var initialData = []; 

var ListModal = function (lists) {
  var self = this;
  self.cardtext = ko.observable();
  self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) {
    return { listname: list.listname, cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) };
  }));
}

function AppViewModel(parent) {
  var self = this;

  // this will keep the object of ViewModel
  self.parentObject = parent;

  self.boardtext = ko.observable();
  self.board = ko.observableArray([
    { boardname: 'Board' },
    { boardname: 'Board' },
    { boardname: 'Board' }
  ]);

  self.addboard = function () {
    self.board.push({ boardname: self.boardtext() });

    // re-initialize listModal
    self.parentObject.listModal(new ListModal(initialData));
  };

  self.removeboard = function () {
    self.board.remove(this);
  };
}

function ViewModel() {
  var self = this;
  self.appViewModel = ko.observable(new AppViewModel(self));
  self.listModal = ko.observable(new ListModal(initialData));
}

// provide another div which wrap container 1 and 2 together
ko.applyBindings(new ViewModel(), document.getElementById("container1And2"));

【讨论】：