淘汰赛复杂的视图模型问题

Question

有人能帮助解释可能是根本故障我做的。 我需要能够有一个模型，可以组有自己的一套绑定的每个对象的列表。

小提琴显示了我什么，只有1块的例子做，但在最后，我想多块。

的Html

<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> 

JS

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.applyBindings（新ResultViewModel（））; http://jsfiddle.net/Todilo/DGUKu/2/

Answer 1

观看演示：http://jsfiddle.net/DGUKu/7/

我将重新构造你的代码，使其更清洁。

HTML：

<!-- 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> 

JS：

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