Я вижу много примеров нокаута 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());