Knockout.js 排除复杂的视图模型问题

有人能帮我解释一下我可能犯的根本错误吗。 我需要有一个模型，它可以将对象列表分组，每个对象都有自己的绑定集

一把小提琴展示了我如何处理一个只有一个方块的例子，但最后我想要多个方块

Html

应用绑定（新的ResultViewModel（））； 参见演示：

我将重新构造您的代码，使其更干净

HTML:

请参见演示：

我将重新构造您的代码，使其更干净

HTML:

---

如果您检查浏览器控制台，您将看到有一个错误停止执行代码。我还是不明白你想要实现什么。我相信还有另一种方法可以使代码更简单，不推荐重叠应用绑定我需要能够映射productblock 1 product 2 product B productblock 1 product 2 product 2 product其他一些东西，但我找不到任何使用现有数据库的示例，我无法找出嵌套。如果您检查在浏览器控制台中，您将看到有一个错误，它会停止执行您的代码。我还是不明白你想要实现什么。我相信还有另一种方法可以使代码更简单，不推荐重叠应用绑定我需要能够映射一个productblock 1 product 2 product B productblock 1 product 2 product 2 product其他一些东西，但我找不到任何使用现有数据库的例子，我无法找出它的嵌套。这看起来是一个非常复杂的问题好的开始，但是当我已经定义了html和块列表时，我该如何处理它呢？所以我想从DOM中“读取它们”。你的意思是你有一个字符串html作为模板？我的意思是，如果我已经在页面上定义了productblocks，我想在创建它们之后绑定它们。在这里，您使用foreach创建它们，然后将其推入可观察数组。问题是ProductsBlock有很多其他信息，页面作为一个整体来自MVC asp.net。所以我想“阅读”html结构并将其放入模型中，这些模型可以根据块、产品等计算成本。我知道我正在扩展敲除功能，但我觉得jQuery并不是为动态更新而构建的，我需要这样做，而且我还没有找到任何其他替代方法。在这种情况下，您应该尝试jQuery模板。试试这个链接：这看起来是一个很好的开始，但是当我已经定义了html和块列表时，我该如何处理呢？所以我想从DOM中“读取它们”。你的意思是你有一个字符串html作为模板？我的意思是，如果我已经在页面上定义了productblocks，我想在创建它们之后绑定它们。在这里，您使用foreach创建它们，然后将其推入可观察数组。问题是ProductsBlock有很多其他信息，页面作为一个整体来自MVC asp.net。所以我想“阅读”html结构并将其放入模型中，这些模型可以根据块、产品等计算成本。我知道我正在扩展敲除功能，但我觉得jQuery并不是为动态更新而构建的，我需要这样做，而且我还没有找到任何其他替代方法。在这种情况下，您应该尝试jQuery模板。试试这个链接：和

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<div class="productblock">
  <div class="product">
    <input class="binding" data-bind="value: amount" type="text" value="1">
  </div>
  <div class="product">
    <input class="binding" data-bind="value: amount" type="text" value="2">
  </div>
  <input class="discount" data-bind="value: discount" value="50">
</div>

</div>
  <span id="res" data-bind="text: result">result here </span>

function ResultViewModel() {
  this.result = ko.computed(function () {
    return 1;
  });
}

function ProductViewModel(val) {
  this.amount = ko.observable(val+1);
  this.sum = function () {
    return this.amount();
  };
}

  var products = [];
function ProductBlockViewModel(block) {
  $.each($(block).find("div.product"), function (index, element) {
    var product = new ProductViewModel($(element).find("input").val());
    products.push(product);
    ko.applyBindings(product);
  });
  this.discount = ko.observable(22);

}
var productBlocks = [];
$.each($("div.productblock"), function (index, element) {
  console.log("a");
  var productBlock = new ProductBlockViewModel(element);
  productBlocks.push(productBlock);
  ko.applyBindings(productBlock, element);
  console.log("asdf");
});

<!-- ko foreach: productBlocks -->
<div class="productblock">
   <!-- ko foreach: productLines -->
  <div class="product">
    <input class="binding" data-bind="value: amount" type="text">
  </div>
  <!-- /ko -->
  <input class="r" data-bind="value: discount" value="50">
</div>
    <hr/>
<!-- /ko -->

<div>
<span id="res" data-bind="text: result"></span>
</div>

function ProductModel (){
  this.amount = ko.observable(0);
  this.sum = function () {
    return this.amount();
  };
}

// product block contains multiple product line
function ProductBlockViewModel(productArray) {
  this.productLines = ko.observableArray(productArray);
  this.discount = ko.observable(50);
}

// your viewmodel for binding data
// should call applybindings only one
function ViewModel(){
  this.result = ko.observable(0);
  this.productBlocks = ko.observableArray([]);
}

var viewModel = new ViewModel();

// let assume you have 2 blocks:

// block 2 products
viewModel.productBlocks.push(new ProductBlockViewModel([
  new ProductModel(), new ProductModel()
]));

// block 3 products
viewModel.productBlocks.push(new ProductBlockViewModel([
  new ProductModel(), new ProductModel(), new ProductModel()
]));

// you can calculate your total result here
viewModel.result(100);

ko.applyBindings(viewModel);