从复选框和选择中获取值的总和 - KnockoutJS

Question

我已经在 jQuery 中做了这个：JSFiddle

HTML:

<div class="container">
    <header>
         <h3>Crazy Sh*t we'll do for Money</h3>

        <div class="small"><em>An elegant way to test out Knockout JS you're thinking of doing</em>

        </div>
    </header>
    <ul>
        <li>
            <input type="checkbox" name="services" value="150" id="srv" />
            <span>Throw knives at us while we're strapped on a turn table (0)</span>

        </li>
        <li>
            <input type="checkbox" name="services" value="200" id="srv" />
            <span>Watch us get chased by Bulls (0)</span>

        </li>
        <li>
            <input type="checkbox" name="services" value="799.50" id="srv" />
            <span>Watch us in a straight jacket immersed in a pool of electric Eels and try to get out of it Houdini style. (9.50)</span>

        </li>
    </ul>
    <hr/>
    <div class="marginise">
<strong>I want to donate to your hospital bills</strong>

        <select id="donate" name="donate">
            <option value="0">No Thanks</option>
            <option value="100">0</option>
            <option value="300">0</option>
            <option value="500">0</option>
        </select>
        <p><strong>Donations</strong>: <span id="blah"></span>
        </p>
    </div>
    <div class="est">
         <h4>Total</h4>
 <span id="serviceTotal"> </span>

    </div>
    <div class="f">These Events / Entertainment Services are not real. Unfortunately.</div>
</div>

jQuery:

function outputValue() {
    mathUsage();
    var donValues = $("#donate").val(); //take from Select
    $("#blah").html(numeral(donValues).format('[=11=],0[.]00'));
}
var $cap = $('input[name="services"]'); //set VAR for checkbox values

function mathUsage() {
    var total = $("#donate").val(); // total (0) + donate value
    $cap.each(function () {
        if (this.checked) total = parseFloat(total) + parseFloat(this.value);
    });
    $("#serviceTotal").text(numeral(total).format('[=11=],0[.]00'));
}
//NumeralJS -> numeral(1000).format('0,0');

$("select").change(outputValue);
outputValue();

$cap.click(mathUsage);

//Now... how to Knockout? :/

我正在尝试练习的是在 knockoutJS 中创建它，这样我就可以拥有一组较小的 HTML 标记。

最好的方法是什么？

我知道那里有很多线索，例如 Fiddle 输出数组中复选框的值...我想使用相同的方法并将值设置为总和，但不知道如何开始或我应该使用什么语法。

Answer 1

我认为你需要如下：

var ViewModel = function(first, last) {
    this.first = ko.observable(first);
    this.last = ko.observable(last);
 
    this.total = ko.computed(function() {
        
        return parseFloat(this.first())  + parseFloat(this.last());
    }, this);
};
 
ko.applyBindings(new ViewModel("10", "10"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample'>   
    <p>First: <input data-bind='value: first' /></p> 
    <p>Last: <input data-bind='value: last' /></p> 
    <h2> <span data-bind='text: total'> </span></h2>  
</div>

勾选Fiddle.

Answer 2

我会给每个复选框单独设置 id/name 首先：

<ul>
        <li>
            <input type="checkbox" name="knives" value="150" id="knives" data-bind="checked: knives" />
            <span>Throw knives at us while we're strapped on a turn table (0)</span>

        </li>
        <li>
            <input type="checkbox" name="bulls" value="200" id="bulls" data-bind="checked: bulls"  />
            <span>Watch us get chased by Bulls (0)</span>

        </li>
        <li>
            <input type="checkbox" name="eels" value="799.50" id="eels" data-bind="checked: eels" />
            <span>Watch us in a straight jacket immersed in a pool of electric Eels and try to get out of it Houdini style. (9.50)</span>

        </li>
    </ul>

那么你的视图模型是这样的：

var viewModel = function() {
    var self = this;
    self.knives = ko.observable(false);
    self.bulls = ko.observable(false);
    self.eels= ko.observable(false);

    self.total = ko.computed(function() {
      var i = 0;
      if (self.knives())
        i += 150;
      if (self.bulls())
        i += 200;
      if (self.eels())
        i += 799.50;    
      return total; 
    });
};

ko.applyBindings(new viewModel());

这是一般的想法。您可以添加其他 viewModel 属性来保存每个服务的值，或者创建一个小对象来包含每个 'service' 的值和状态。我会把它留给你。

从复选框和选择中获取值的总和 - KnockoutJS

Getting the sum of values from Checkboxes and Selects - KnockoutJS

html

javascript

css

jquery

knockout.js