1 
    $(function(){
        $("#herb_pinyin").autocomplete({source: "api_herbs.php"});

        $.extend(bindings, {
            ingredients: ko.observableArray(),
            newIngredient: {
                pinyin: ko.observable(""),
                dosage: ko.observable(""),
                dosageType: ko.observable("g")
            }
        });

        ko.applyBindings(bindings);

    });

    function addIngredient() {
        if (!bindings.newIngredient.pinyin()) return;
        bindings.ingredients.push({
            pinyin: bindings.newIngredient.pinyin(),
            dosage: bindings.newIngredient.dosage(),
            dosageType: bindings.newIngredient.dosageType(),
        });
        bindings.newIngredient.pinyin("");
        bindings.newIngredient.dosage("");
        bindings.newIngredient.dosageType("g"); 
        $("#herb_pinyin").focus();
    }
        <div data-bind="foreach:ingredients">
            <div>
            <span data-bind="text:pinyin"></span>,
            <span data-bind="text:dosage"></span><span data-bind="text:dosageType"></span>
            </div>
        </div>
  <div data-bind="foreach:ingredients">
    <input type="hidden" data-bind="value:pinyin, attr:{name:'pinyin-'+$index()}" />
    <input type="hidden" data-bind="value:dosage, attr:{name:'dosage-'+$index()}" />
    <input type="hidden" data-bind="value:dosageType, attr:{name:'dtype-'+$index()}" />
  </div>
      <input name="herb_pinyin" type="text" id="herb_pinyin" placeholder="herb name in pinyin" size="30" data-bind="value:newIngredient.pinyin" />
      <input name="dosage" type="text" id="dosage" placeholder="enter amount" size="13" data-bind="value:newIngredient.dosage" />
      <select name="dosage_type" id="dosage_type" data-bind="value:newIngredient.dosageType" >
        <option value="g" selected="selected">g</option>
        <option value="pcs">pcs</option>
      </select>
      <input type="button" name="button" id="button" value="Add" onclick="addIngredient()" />

添加成分功能按钮在 chrome 和 IE 中没有任何作用；在 Firefox 中运行良好。关于它为什么不起作用的任何线索？基本上单击添加按钮稍后将执行对 mysql 的更新。

在 api_herbs.php 我从数据库中获取用于 autcomplete 的草药列表并放入 json：

$results = array();
while ($row = mysql_fetch_object($rsList))
    $results[] = $row->pinyin;

print json_encode($results);

我尝试了添加 bindings.addIngredient = addIngredient; 的建议。但这没有任何明显的影响。

4

2 回答 2

0

根据您从自动完成中选择时关于它不起作用的最后评论：

当您从自动完成列表中选择某些内容时，自动完成很可能会通过 JavaScript 插入一个值。在这种情况下，不会触发更新该字段的事件，并且 Knockout 不会知道该字段中有值。这可能是你的问题。要解决这个问题，您必须挂钩 jQuery 自动完成触发的事件，并手动更新您的淘汰赛 observable。见http://api.jqueryui.com/autocomplete/#event-select

我认为您需要“选择”事件。所以你会得到这样的东西：

$("#herb_pinyin").autocomplete({
    select: function(event, ui) {
        bindings.newIngredient.pinyin($("#herb_pinyin").val());
    }
});

没有测试过以上，但我希望你明白！

于 2013-11-12T08:36:35.700 回答
0

您似乎没有粘贴所有代码。一方面，缺少 ID 为“herb_pinyin”的元素。此外，您将某些 JavaScript 包含了两次（这将产生错误，因为 ko.applyBindings 被调用了两次）。我假设这是一个复制粘贴错误:)

如果没有完整的来源，很难确定出了什么问题。但是，我确实注意到您的 addIngredient 函数不在视图模型上。通过在调用 ko.applyBindings 之前添加以下行来更正此问题：

bindings.addIngredient = addIngredient;

让我知道这是否有帮助。如果没有，请添加缺少的源代码。

编辑： 问题确实（部分）是 addIngredient 不在您的视图模型上。我已经根据您的代码创建了一个 JSFiddle（在 Chrome 中测试）。

http://jsfiddle.net/YzLMq/

除了在应用绑定之前将 addIngredient 函数添加到 viewmodel 之外，我还更改了 add-button 上的 HTML 以使用 data-bind="click: addIngredient" 而不是您在那里的内容。

于 2013-11-11T13:35:00.337 回答