Нокаут: привязать данные foreach в html к ответу ajax

Я вижу много примеров нокаута foreach. Но это не совсем так, как я хочу. Я новичок в нокауте.

Я хочу сделать это при нажатии данных ответа ajax в ko.observableArray () и отображать данные foreach в содержимом html.

Но я получил сообщение об ошибке Uncaught ReferenceError: Невозможно обработать привязку "src: $ data.productName"

Я размещаю здесь свой html-код и js-код.

Помогите, пожалуйста.

HTML:

<input type="text" id="description" class="form-control" maxlength="255" data-bind="event:{keyup: doSomething},value: changeTextValue,valueUpdate:'afterkeyup'"></input>
<div class="autocomplete-suggestions" data-bind="foreach: autocompleteData">
    <div class="autocomplete-suggestion" data-index="text: $index">
        <div href="#">
            <div class="suggestion-left">
                <img class="img-responsive" data-bind="attr: {src:$data.productName}" alt="">
            </div>
            <div class="suggestion-right">
                <div class="product-line product-name">
                    <a data-bind="attr: {href:$data.productUrl}" target="_blank"><span data-bind="text:$data.productName}"></span></a>
                </div>
                <div class="product-line product-price">Price: <span data-bind="value:$data.productPrice}"></span></div>
                <div class="product-des">
                    <p class="short-des" data-bind="attr : {id:$data.productSku}">Sku: <span data-bind="text:$data.productSku}"></span></p>
                </div>
                <div class="tranferdata">
                    <button id="search-item-list">Add Item</button>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery:

return Component.extend({
        defaults:{
            changeTextValue: ko.observable(),
            anotherObservableArray : [],
            subscription : null,
            tracks: {
                    changeTextValue: true
              }
        },
        CourseViewModel : function(){
            var self = this;
            self.productName = ko.observable();
            self.productSku = ko.observable();
            self.imageUrl = ko.observable();
            self.productPrice = ko.observable();
            self.productUrl = ko.observable();
        },
        CeremonyViewModel : function () {
            var self = this;
            self.autocompleteData = ko.observableArray([new CourseViewModel()]);
            self.autocompleteData.push(new CourseViewModel());
        },
        initialize: function () {
            this._super();
        },
        doSomething : function(config){
            var self = this;
            if (this.subscription)
                this.subscription.dispose();

            this.subscription = this.changeTextValue.subscribe(function(newValue){
                if(newValue.length >= config.configValue){
                    fullScreenLoader.startLoader();
                    storage.post(
                        'abc/temp/temp',
                        JSON.stringify({'searchtext' : newValue}),
                        true
                    ).done(
                        function (response) {
                            /** Do your code here */
                            self.autocompleteData.push({productName:response.productName,imageUrl:response.imageUrl,productSku:response.productSku,productPrice:response.productPrice,productUrl:response.productUrl});
                            fullScreenLoader.stopLoader();
                        }
                    ).fail(
                        function (response) {
                            // fullScreenLoader.stopLoader();
                        }
                    );
                }
            });
        },
});
ko.applyBindings(new CeremonyViewModel());
0
0
1 210
1

Ответы 1

А без $data пробовали?

<div class="autocomplete-suggestions" data-bind="foreach: autocompleteData">
    <div class="autocomplete-suggestion" data-index="text: $index">
        <div href="#">
            <div class="suggestion-left">
                <img class="img-responsive" data-bind="attr: {src:productName}" alt="">
            </div>
            <div class="suggestion-right">
                <div class="product-line product-name">
                    <a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName}"></span></a>
                </div>
                <div class="product-line product-price">Price: <span data-bind="value:productPrice}"></span></div>
                <div class="product-des">
                    <p class="short-des" data-bind="attr : {id:productSku}">Sku: <span data-bind="text:productSku}"></span></p>
                </div>
                <div class="tranferdata">
                    <button id="search-item-list">Add Item</button>
                </div>
            </div>
        </div>
    </div>
</div>

Если это не сработает, возможно, ваш observableArray содержит неправильные данные / формат. В этом случае, пожалуйста, console.log массив после вызова ajax и добавьте в свой вопрос.

да. Но по-прежнему он не отображается в полях html.

Keval Mehta 10.09.2018 08:26

Не могли бы вы console.log свой ответ ajax и показать вопрос?

Ray 10.09.2018 08:27

Я добавил console.log (self.autocompleteData) после => self.autocompleteData.push (). Но я не могу получить консоль.

Keval Mehta 10.09.2018 08:28

сделайте этот console.log (self.autocompleteData ()). Вы должны вызывать наблюдаемые как функцию, чтобы получить их значения

Ray 10.09.2018 08:29

подождите ... Я вижу, что когда вы инициализируете код, вы применяете привязки к CeremonyViewModel и подталкиваете пустой экземпляр CourseVideoModel к autoCompleteData. Не делай этого.

Ray 10.09.2018 08:33

Позвольте нам продолжить обсуждение в чате.

Ray 10.09.2018 08:33

Другие вопросы по теме