Question

我是结合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。谢谢您的帮助，提示和任何解释；-) 干杯

Answer 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，因为您添加了从未执行applyBindings的新html元素。

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

Answer 2

我大体上同意阿米特（Amit）所说的话（并给了他我赞成票），但是如果您想要动态表单，那么您也可以尝试Knockout的html binding（当您想绑定几行时）和{{3} }（要显示整个数据部分时）。

我了解您希望结合使用Knockout，jQuery和Typescript，但您必须了解彼此的要点，并使它们相互补充。淘汰赛和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>

淘汰赛ajax通话数据-BIND

2 个答案: