नॉकआउटज

Question

में गणना की गई वस्तुओं के अवलोकन योग्य ऑर्रे को स्थापित करने का एक बेहतर तरीका इस jsfiddle में मेरे पास एक सरल उदाहरण है जो मैं काम करना चाहता हूं। यह सब ठीक काम कर रहा है। लेकिन ऐसा लगता है कि कुछ लूप या कुछ के साथ इन सरणी बनाने के लिए एक बेहतर तरीका होना चाहिए। मैं पूरे दिन कोशिश कर रहा हूं और सफल नहीं हुआ हूं। किसी ने मुझे बता सकते हैं कि

1. यह संभव
2. क्या वूडू मैं क्रम में प्रदर्शन करने के लिए यह काम करने के लिए की जरूरत है।

यहां पहेली से कोड है।

दृश्य:

<table> 
<tbody> 
    <tr> 
     <td></td> 
     <!-- ko foreach: topvals --> 
     <td > 
      <input type="text" data-bind="value: val"/> 
     </td> 
     <!-- /ko --> 
    </tr> 
    <tr> 
     <td><input type="text" data-bind="value:sidevals()[0].val"/></td> 
     <!-- ko foreach: intersections()[0] --> 
     <td><span data-bind="text: val"></span></td> 
     <!-- /ko --> 
    </tr> 
    <tr> 
     <td ><input type="text" data-bind="value:sidevals()[1].val"/></td> 
     <!-- ko foreach: intersections()[1] --> 
     <td><span data-bind="text: val"></span></td> 
     <!-- /ko --> 
    </tr> 
</tbody> 
</table> 

ViewModel:

function ViewModel() { 

    this.topvals = ko.observableArray([ 
     { val: ko.observable(6) }, 
     { val: ko.observable(1) }, 
     { val: ko.observable(1) }, 
     { val: ko.observable(1) } 
    ]); 

    this.sidevals = ko.observableArray([ 
     { val: ko.observable(1) }, 
     { val: ko.observable(1) }, 
     { val: ko.observable(1) } 
    ]); 

    this.intersections = ko.observableArray([ 
     [ 
      { val: ko.computed(function() { return this.topvals()[0].val() * this.sidevals()[0].val(); }, this) }, 
      { val: ko.computed(function() { return this.topvals()[1].val() * this.sidevals()[0].val(); }, this) }, 
      { val: ko.computed(function() { return this.topvals()[2].val() * this.sidevals()[0].val(); }, this) }, 
      { val: ko.computed(function() { return this.topvals()[3].val() * this.sidevals()[0].val(); }, this) } 
     ], 
     [ 
      { val: ko.computed(function() { return this.topvals()[0].val() * this.sidevals()[1].val(); }, this) }, 
      { val: ko.computed(function() { return this.topvals()[1].val() * this.sidevals()[1].val(); }, this) }, 
      { val: ko.computed(function() { return this.topvals()[2].val() * this.sidevals()[1].val(); }, this) }, 
      { val: ko.computed(function() { return this.topvals()[3].val() * this.sidevals()[1].val(); }, this) } 
     ] 
    ]); 
} 

ko.applyBindings(new ViewModel()); 

Answer 1

• topvals और sidevals सरणियों आप ko.mapping.fromJS उपयोग कर सकते हैं बनाने के लिए।
• गणना intersections बनाने के लिए आप ko.utils.arrayMap फ़ंक्शन का उपयोग करके "सरणी की सरणी" वापस कर सकते हैं। यहाँ

  function ViewModel() { 
      var self = this; 
  
      var calculateIntersection = function(topval, sideval) { 
       return topval * sideval; 
      }; 
  
      var topvals = [{ val: 1 }, { val: 2 }, { val: 3 }]; 
      var sidevals = [{ val: 1 }, { val: 2 }, { val: 3 }]; 
  
      self.topvals = ko.mapping.fromJS(topvals); 
      self.sidevals = ko.mapping.fromJS(sidevals); 
      self.intersections = ko.computed(function() { 
       return ko.utils.arrayMap(self.sidevals(), function(sideval) { 
        return ko.utils.arrayMap(self.topvals(), function(topval) { 
         return calculateIntersection(topval.val(), sideval.val()); 
        }); 
       }); 
      }); 
  } 
  
  ko.applyBindings(new ViewModel()); 
  

  और दृश्य है:

यहाँ अंतिम कोड (और एक jsfiddle) है

<table> 
    <tbody> 
     <tr> 
      <td></td> 
      <!-- ko foreach: topvals --> 
      <td > 
       <input type="text" data-bind="value: val"/> 
      </td> 
      <!-- /ko --> 
     </tr> 
     <!-- ko foreach: sidevals --> 
     <tr> 
      <td><input type="text" data-bind="value: val"/></td> 
      <!-- ko foreach: $root.intersections()[$index()] --> 
      <td><span data-bind="text: $data"></span></td> 
      <!-- /ko --> 
     </tr> 
     <!-- /ko --> 
    </tbody> 
</table> 

Answer 2

यह सरल दृश्य मॉडल पहले से ही यह होता है:

function ViewModel(vals1, vals2) { 
    this.topvals = ko.observableArray(mapToObservables(vals1)); 
    this.sidevals = ko.observableArray(mapToObservables(vals2)); 
    this.calc = function (val1, val2) { 
     return ko.unwrap(val1) * ko.unwrap(val2); 
    }; 
} 

ko.applyBindings(new ViewModel([6, 5, 4, 3], [1, 2, 3])); 

जहां mapToObservables या तो मैपिंग के लिए खड़ा है प्लगइन या इस प्रकार की एक समारोह:

function mapToObservables(vals) { 
    return ko.utils.arrayMap(vals, function (val) { 
     return { val: ko.observable(val) }; 
    }); 
}; 

और इस दृश्य

<table> 
<tbody> 
    <tr> 
     <td></td> 
     <!-- ko foreach: topvals --> 
     <td><input type="text" data-bind="value: val"/></td> 
     <!-- /ko --> 
    </tr> 
    <!-- ko foreach: sidevals --> 
    <tr> 
     <td><input type="text" data-bind="value: val"/></td> 
     <!-- ko foreach: $root.topvals --> 
     <td><span data-bind="text: $root.calc(val, $parent.val)"></span></td> 
     <!-- /ko --> 
    </tr> 
    <!-- /ko --> 
</tbody> 
</table> 

देखें: http://jsfiddle.net/dt9kL/

एक संस्करण मूल्यों के लिए एक अलग उप मॉडल का उपयोग करने के लिए होगा: http://jsfiddle.net/dt9kL/1/। एक मूल्य को encapsulating के लिए यह overkill है, लेकिन यह अधिक जटिल संरचनाओं के लिए उपयोगी हो सकता है।