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中工作正常。关于它为什么不起作用的任何线索？基本上clikcing添加按钮稍后将执行对mysql的更新。

在api_herbs.php中我从数据库获取autcomplete的草药列表并放入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函数不在viewmodel上。在调用ko.applyBindings之前添加以下行来纠正此问题：

bindings.addIngredient = addIngredient;

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

修改问题确实（部分）是addIngredient不在您的viewmodel上。我已根据您的代码创建了一个JSFiddle，它可以正常工作（在Chrome中测试）。

http://jsfiddle.net/YzLMq/

除了在应用绑定之前将addIngredient函数添加到viewmodel之外，我还更改了添加按钮上的HTML以使用data-bind =“click：addIngredient”而不是你在那里的那些。

Answer 2

根据您从自动填充中选择时的最新评论：

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

我认为您需要'select'事件。所以你得到这样的东西：

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

没有测试过上述内容，但我希望你能得到这个想法！

knockout.js在chrome中不起作用，但工作正常firefox

2 个答案: