淘汰ajax调用数据-BIND答案

【问题标题】：knockout ajax call data-BIND淘汰ajax调用数据-BIND
【发布时间】：2019-04-06 23:48:53
【问题描述】：

我是一个结合 jQuery、Knockout 和 Typescript 的初学者。当我尝试在 AJAX 调用中附加一些代码时，试图理解为什么数据绑定不起作用。

我的HTML：

<div class="container">
</div>

我的 Typescript 类（ViewModel）：

export class ViewModel {
    name = ko.observable('NAME PROPERTY');

    constructor() {
        $('.container').append('<h6 data-bind="text: name"></h6>');
        this.getDataAjax();
    }

    public getDataAjax() {
        var self = this;
        $.ajax({
            type: "GET",
            url: "http://localhost:4000/GetData",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $('.container').append('<h6 data-bind="text: name"></h6>');
                console.log(data);
            }
        });
    }
}

在构造函数中附加带有 name 属性的标头工作正常，我可以看到数据。但是，当我在返回数据后附加它时，它根本不显示。 AJAX 调用工作正常 - 因为我可以在控制台日志中看到正确的数据。

我正在处理动态表单，需要在 ajax 调用之后附加一些 HTML。感谢您的帮助、提示和任何解释；-) 干杯

【问题讨论】：

标签： jquery typescript data-binding knockout.js

【解决方案1】：

knockoutJS 的想法是保持视图和模型分离。我会将标题保留在 html 中，然后绑定属性

<div class="container">
<h6 data-bind="text: name"></h6>
</div>

然后只需更改属性的值，它就会自动反映。

export class ViewModel {
name = ko.observable('NAME PROPERTY');

constructor() {
    this.getDataAjax();
}

public getDataAjax() {
    var self = this;
    $.ajax({
        type: "GET",
        url: "http://localhost:4000/GetData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            name(data.name); //assign data.
            console.log(data);
        }
    });
}

}

但是当您使用动态表单时，您需要再次 applyBindings，因为您添加了新的 html 元素，而 applyBindings 从未在该元素上执行过。

ko.applyBindings(viewModel, document.getElementById("IdProvidedToH6"));

【讨论】：

【解决方案2】：

我基本同意 Amit 所说的（并给了他我的支持），但如果你想要动态表单，那么你也可以试试 Knockout 的 html binding（当你想绑定几行时）和 template binding（当你想要显示整个数据部分）。

我知道您希望将 Knockout、jQuery 和 Typescript 结合起来，但您必须了解每一个的要点，并使它们相互补充。 Knockout 和 jQuery 都可以在 UI 上操作数据。然而，Knockout 的核心目的是保持 viewModel 和 View 同步，而 jQuery 最初是作为一个使选择更容易的库。

所以我的建议是使用 Knockout 来修改 UI 上的数据，使用 jQuery 来选择和捕获数据。

以下是使用 Knockout 添加 HTML 的两个示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- Examples taken from Knockout documentation -->


HTML binding:
<div data-bind="html: details"></div>
 
<br>
Template binding: 
<div data-bind="template: { name: 'person-template', foreach: people }"></div>
 
<script type="text/html" id="person-template">
    <h4 data-bind="text: name"></h4>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>



<script type="text/javascript">
    var viewModel = {
        details: ko.observable(),
        people: ko.observableArray()
    };
    ko.applyBindings(viewModel);
    
    
    //simulate AJAX call with setTimeouts
    setTimeout(function(){
      viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
    },1000);
    
    setTimeout(function(){
      viewModel.people([
         { name: 'Franklin', credits: 250 },
         { name: 'Mario', credits: 5800 }
     ]);
    },2000);
</script>

【讨论】：