knockout.js不适用于chrome，但适用于firefox

Question

    $(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中工作得很好。有什么线索可以解释为什么它不起作用吗？基本上，点击add按钮之后将执行mysql的更新。

在api_herbs.php中，我从数据库获取自动完成的药草列表，并将其放入json中：

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

print json_encode($results);

我尝试了您的建议，添加bindings.addIngredient = addIngredient；但没有任何明显的效果。

Answer 1

看起来你并没有粘贴所有的代码。其中之一是缺少ID为'herb_pinyin‘的元素。此外，您两次包含了一些JavaScript (这将产生一个错误，因为ko.applyBindings被调用了两次)。我将假设这是一个复制-粘贴错误:)

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

bindings.addIngredient = addIngredient;

如果有帮助的话请告诉我。如果没有，请添加缺少的源代码。

编辑：问题确实(部分)在于addIngredient不在你的视图模型中。我已经创建了一个基于你的代码的JSFiddle，它可以工作(在Chrome上测试过)。

http://jsfiddle.net/YzLMq/

除了在应用绑定之前将数据绑定函数添加到视图模型之外，我还更改了add按钮上的addIngredient，以使用data-bind="click: addIngredient“，而不是原来的数据绑定。

Answer 2

根据您上次从自动完成中选择时有关它不工作的评论：

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

我认为你需要'select‘事件。所以你会得到这样的结果：

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

我还没有测试过上面的内容，但我希望您能理解！