javascript - 从复选框和选择中获取值的总和 - 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 ($150)</span>

        </li>
        <li>
            <input type="checkbox" name="services" value="200" id="srv" />
            <span>Watch us get chased by Bulls ($200)</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. ($799.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">$100</option>
            <option value="300">$300</option>
            <option value="500">$500</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('$0,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('$0,0[.]00'));
}
//NumeralJS -> numeral(1000).format('0,0');

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

$cap.click(mathUsage);

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

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

最好的方法是什么？

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

Answer 1

首先，我会给每个复选框指定自己的 ID/名称:

<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 ($150)</span>

        </li>
        <li>
            <input type="checkbox" name="bulls" value="200" id="bulls" data-bind="checked: bulls"  />
            <span>Watch us get chased by Bulls ($200)</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. ($799.50)</span>

        </li>
    </ul>

那么你的 View 模型是这样的:

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 属性来保存每个服务的值，或者创建一个小对象来包含每个“服务”的值和状态。我会把它留给你。