在自动填充的输入上没有Knockout模型绑定

本文关键字：Knockout 模型 绑定 输入 填充 | 更新日期: 2023-09-27 18:12:09

我有一个从c# -ViewModel自动创建的knockout模型:

视图模型: 

public class SearchModel
{
    public ActualLocationModel Location { get; set; }
}
public class ActualLocationModel
{
    public string Address { get; set; }
}

search.js: 

function Search(model) {
    var self = this;
    self._model = model;
    ko.applyBindings(self._model, document.getElementById("searchForm"));
    $('#submitButton').click(function () {
        alert(self._model.ActualLocation.Address); // proof!
    });
}

Search.cshtml: 

@model ViewModels.SearchModel
<div id="searchForm">
    <input data-bind="value: ActualLocation.Address" type="text">
    <input type="submit" id="submitButton" value="Find" />
</div>
<script type="text/javascript">
    $(function () {
        window.search= new Search(@Html.Raw(Json.Encode(Model)));
    });
</script>

因此，只要我手动输入值，数据绑定就会像预期的那样工作。但是在我的例子中，这些值是通过地理位置自动填充的。在这种情况下，绑定没有做它应该做的事情(输出总是null)。是否有一种方法可以让Knockout数据绑定在自动填充的输入上工作?

谢谢你的帮助!

在自动填充的输入上没有Knockout模型绑定

好了，这里有一些相关的比特来为你工作:

<script type="text/javascript">
    $(function() {
        window.search = new Search(JSON.parse('@Html.Raw(Json.Encode(Model))'));
    });
</script>

注意，我们正在解析转换为JSON的模型，以便我们可以在模型中使用生成的Javascript对象。如果您想直接从JSON转换到您的模型，请考虑ko。映射库，虽然它不再积极维护，我相信。

<form id="searchForm">
    <input data-bind="value: Location.Address" type="text">            
    <input type="submit" id="submitButton" value="Find" />
</form>

这里，注意从AdditionalLocation.Address到Location.Address的变化。

function Search(model) {
    var self = this;
    self._model = model;
    ko.applyBindings(self._model, document.getElementById("searchForm"));
    $('#submitButton').click(function () {
        alert(self._model.Location.Address); // proof!
    });
}

最后，我们修正警报以反映我们的数据(AdditionaLocation到Location)的形状。

使用上面的代码，一切都如我所料。

相关文章：